Question

在页面上单击按钮（图像）并显示文本。当文本出现时，您单击该文本，我希望它出现在输入框中。例如，您点击图像red.jpg，旁边会出现文字，上面写着“水果气味”。当您点击“Fruit Scents”时，我希望它出现在输入框中。我希望从盒子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>

Answer 1

这是我为你编写的一个非常基本的例子。

使用.value和其他一些东西......

input.value="herp derp";

JSFIDDLE link to example

Answer 2

只需在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)};
    }

单击“将文本放置到输入框”

2 个答案: