Javascript 单击“将文本放入输入框”_Javascript

Javascript 单击“将文本放入输入框”

javascript

Javascript 单击“将文本放入输入框”,javascript,Javascript,在页面上，单击按钮（图像）并显示文本。当文本出现时，单击该文本，我希望它出现在输入框中。例如，单击image red.jpg，文本将显示在其旁边，显示“水果香味”。单击“水果香味”时，我希望它显示在输入框中。我希望这种情况发生的顺序从框1-框3，如果第一个框是满的进入第二个。我不太擅长使用数组，所以我不知道从哪里开始。这是我所有的代码： <script> var current_obj=''; function showLinks(objID) { var obj

在页面上，单击按钮（图像）并显示文本。当文本出现时，单击该文本，我希望它出现在输入框中。例如，单击image 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>


无功电流_obj=“”；
功能显示链接（objID）{
var obj=document.getElementById（objID）；if（当前对象样式）{
当前_obj.style.display='none'；}
object.style.display='block'；
当前_obj=obj；}
.showhide_元素{
显示：无；}
html{
背景重复：无重复；
背景大小：100%100%；
身高：100%；
}
#容器{宽度：1950px；}
#容器div{float:left；width:300px；margin left:10px；margin right:10px}
部门联系人{
背景：#FFF；
左边距：自动；
右边距：自动；
填充：50px；
宽度：1000px；
高度：800px；
边界半径：25px；
-moz边界半径：25px；
}
部门#联系方式(文本){
背景：黄色；
}
div.Contact_按钮{
背景：白色；
高度：500px；
边缘顶部：100px；
宽度：96px；
边框：2个点；
边界半径：25px；
-moz边界半径：25px；
}
分区测试{
对齐：右；
}
#集装箱#联系。联系按钮{
颜色：#9090；
}
#水果菜单信息{
宽度：96px；
高度：500px；
}
#花卉菜单信息{
宽度：96px；
高度：500px；
}
分区联系人按钮2{
背景：白色；
高度：500px；
边缘顶部：100px；
宽度：96px；
边框：2个点；
边界半径：25px；
-moz边界半径：25px；
}
分区联系人按钮3{
背景：白色；
高度：500px；
边缘顶部：100px；
宽度：96px；
边框：2个点；
边界半径：25px；
-moz边界半径：25px；
}
选择一个气味类别
选择3种香味
水果香味
花香

您的混合
气味1
气味2
Scnet 3

这是我为您编写的一个非常基本的示例

使用.value和其他一些东西

input.value="herp derp";

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

函数更新输入（i）{
document.getElementById（'name\u of_input\u id'）。value=i.innerHTML；
}
var pTags=document.getElementsByTagName（'p'）；
对于（i=0；i

非常感谢您的帮助！嗨，再次感谢你的密码。这是我的代码的一个很好的参考。我现在很难让你点击图片后出现的文本在点击下一张图片后消失。：函数showtext（id）{document.getElementById（id+“Scent”）.innerHTML=id；}是否可以变成一个显示和隐藏函数？@user2121982是的，这是可能的，基本上你会得到输入的当前值，然后搜索其中一个值，如果它存在，则将其删除，否则将其放入其中。你好，谢谢。我不知道如何使用函数来实现这一点。我一直在尝试修改简单的隐藏和显示函数，有时我会得到我想要的结果，但不是很好。谢谢！我得到了隐藏和显示的工作。我正在尝试修改您提供给我的函数，使其文本显示在3个输入框中，而不是2个，但由于它是一个if，then语句，它不起作用…有没有关于我应该如何进行更改的建议？谢谢你的帮助！