在點擊配售文成輸入框

在你的頁面點擊一個按鈕（圖像）和文本。當文本出現時，您單擊該文本，我希望它出現在輸入框中。例如，您點擊圖片red.jpg，文本會在旁邊顯示「水果氣味」。當你點擊「水果香味」時，我希望它出現在輸入框中。我希望從盒子1到盒子3的順序發生這種情況，並且如果第一個盒子已滿，可以進入第二盒子。我不擅長使用數組，所以我不知道從哪裏開始。這是我所有的代碼：在點擊配售文成輸入框

<script> 
    var current_obj=''; 
    function showLinks(objID) { 
    var obj=document.getElementById(objID); if (current_obj.style) { 
    current_obj.style.display='none'; } 
    obj.style.display='block'; 
    current_obj=obj; } 
</script> 

<style type="text/css" media="all"> 
    .showhide_element { 
    display: none; } 
    html { 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    height: 100%; 
} 

    #container{width:1950px;} 
    #container div{float:left;width:300px;margin-left:10px;margin-right:10px} 

    div#Contact { 
background: #FFF; 
margin-left: auto; 
margin-right: auto; 
padding: 50px; 
width: 1000px; 
height:800px; 
border-radius:25px; 
-moz-border-radius:25px; 
} 
div#Contact_Text { 
background: yellow; 
} 
div.Contact_Button { 
background: white; 
height: 500px; 
margin-top: 100px; 
width: 96px; 
border:2px dotted; 
border-radius:25px; 
-moz-border-radius:25px; 
} 
div.test { 

align:right; 
} 
#container #Contact .Contact_Button { 
color: #909090; 
} 


#FruitsMenu_info { 



width:96px; 
height:500px; 
} 


#FloralsMenu_info { 



width:96px; 
height:500px; 
} 
div.Contact_Button2{ 

background: white; 
height: 500px; 
margin-top: 100px; 
width: 96px; 
border:2px dotted; 
border-radius:25px; 
-moz-border-radius:25px; 
} 
div.Contact_Button3{ 

background: white; 
height: 500px; 
margin-top: 100px; 
width: 96px; 
border:2px dotted; 
border-radius:25px; 
-moz-border-radius:25px; 
    } 
    </style> 
    </head> 

    <body bgcolor="#ade0fa"> 

    <div id="container"> 
    <div style="position: absolute; z-index: 5000; top: 24px; left: 22px;"><img     

    src="customize.jpg" width="288" height="100" /></div> 

    <div id="Contact"> 

    <div class="Contact_Button"> 
    <p align="center"><b> <font color:"#a6a6a6">Select a Scent Category</font></b></p> 

    <a href="#" onClick="showLinks('FruitsMenu_info');return false;"><div 
    style="position:  

    absolute;width:134px; z-index: 5000; top: 200px; left: 120px;"><img src="red.jpg" 

    width="132" height="43" /> </div></a> 


    <a href="#" onClick="showLinks('FloralsMenu_info');return false;"><div 
    style="position: 

    absolute;width:134px; z-index: 5000; top: 240px; left: 120px;"><img src="Florals.jpg" 

    width="132" height="43" /></div></a> 

    </div> 

    <div class="Contact_Button2"> 
    <p align="center"><b> <font color:"#a6a6a6F">Choose 3 Scents </font></b></p> 

    <div style="z-index: 5000; top: 540px; left: 220px;"id="FruitsMenu_info" 

    class="showhide_element"> 
<p align="center"><font color:"#000000">Fruits Scents</font></p></div> 

    <div style="z-index: 5000; top: 540px; left: 220px;"id="FloralsMenu_info" 
    class="showhide_element"><p align="center"><font color:"#000000">Floral Scents</font> 
    </p></div> 


</div> 



<div class="Contact_Button3"> 
    <p align="center"><b> <font color:"#a6a6a6">Your Blend</font></b></p> 
    <form id="form1" name="form1" method="post" action=""> 
     <input type="text" name="Scent 1" id="Scent 1" /> 
     <label for="Scent 1"></label> 
     Scent 1 

     <input name="Scent 2" type="text" /> 
     Scent 2 
     <input name="Scent 3" type="text" /> 
     Scnet 3 
    </form> 

</div> 

    </div> 
    </div> 
    </body> 
    </html>

來源

2013-03-02 user2121982

這是我爲你編碼的一個非常基本的例子。

使用.value的和一些其他的東西......

input.value="herp derp";

JSFIDDLE link to example

來源

2013-03-02 05:34:14 Zachrip

非常感謝您的幫助！ – user2121982 2013-03-04 18:43:43

嗨，再次感謝代碼。這是我的代碼很好的參考。我現在遇到問題，點擊圖片後出現的文字會在您點擊下一張圖片後消失。可以：函數showtext（id）{document.getElementById（id +「Scent」）。innerHTML = id; }變成顯示和隱藏功能？ – user2121982 2013-03-04 20:56:10

@ user2121982是的，有可能，基本上你會得到輸入的當前值，然後搜索其中一個值，然後如果存在，請將其刪除，否則將其放在那裏。 – Zachrip 2013-03-06 03:10:48

只要運行在JS代碼的HTML這個代碼後。既然你沒有使用jQuery，我們就會手忙腳亂。這可能太多了，因爲它會抓取頁面上任何p標記的所有innerHTML並填充輸入。

function updateInput(i){ 
    document.getElementById('name_of_input_id').value = i.innerHTML; 
} 
    var pTags = document.getElementsByTagName('p'); 
    for(i=0; i < pTags.length; i++){ 
     pTags[i].onclick = function(){updateInput(this)}; 
    }

來源

2013-03-02 06:43:39

在點擊配售文成輸入框

回答

相關問題