Javascript按钮单击以从div获取输入

Question

我有一个我无法解释的问题，因此我举一个例子，说明我的输出需要是什么。

这是我的剧本

 function myfunction(e) { var value = document.getElementById("value").value; alert(value); } 

 <div class="test"> <input id="value" type="text" name="" value="banana"> <button id="button" type="button" name="button" onclick="myfunction()">Button</button> </div> <div class="test"> <input id="value" type="text" name="" value="apple"> <button id="button" type="button" name="button" onclick="myfunction()">Button</button> </div> 

如您所见，只有输入值不同。 如果我现在运行脚本，然后单击div，其中apple是我的值，是香蕉。 但是，如果我单击div香蕉，它会提示“香蕉”，如果我单击苹果，它会提示“苹果”，我需要安装它。 我该怎么做呢？需要点击1按钮而不是div单击。 乘飞机真的很难，所以如果您有任何疑问，请告诉我。

Answer 1

首先， 永远不要使用id两次。 下面的代码警告来自输入的值，该值是按钮的同级元素，从中调用该函数。

 function myfunction(e) { var input = e.parentNode.getElementsByTagName("input")[0]; //or whatever selector you need var value = input.value; console.log(value); } 

 <div class="test"> <input type="text" name="" value="banana"> <button type="button" name="button" onclick="myfunction(this)">Button</button> </div> <div class="test"> <input type="text" name="" value="apple"> <button type="button" name="button" onclick="myfunction(this)">Button</button> </div>