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>

正如您所看到的，只是输入值不同。如果我现在运行脚本并单击 apple 所在的 div，我的值是香蕉。但我需要它，如果我点击 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>