在点击配售文成输入框

在你的页面点击一个按钮（图像）和文本。当文本出现时，您单击该文本，我希望它出现在输入框中。例如，您点击图片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

在点击配售文成输入框

回答

相关问题