仅使用 javascript 从 HTML 文件中选择单个输入值

Question

我正在尝试在没有 jquery 的情况下进行表单验证。我找到了这段代码，但我不确定如何将它从 Jquery 转换为普通 Javascript。我在这里找到了这段代码

 $('.clickme').click(function() { alert($(this).prev().val()) })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="hidden" name="myvalue" class="form-control input_text" value="aaa" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="bbb" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="ccc" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="ddd" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="eee" /> <input type="button" class="clickme" value="Get Value" />

对此的任何帮助都将是惊人的。 我在一个 HTML 文件中有多个 forms，它们都具有相同的输入变量，我需要这些函数仅在单击该特定输入按钮时运行。

Answer 1

下面的 JS 代码应该可以完成这项工作：

document.querySelectorAll('.clickme').forEach(ele => {
  ele.addEventListener('click', () => alert(ele.previousElementSibling.value))
});

需要循环遍历所有带有 class "click me" 的元素，并给它们添加点击事件

 document.querySelectorAll('.clickme').forEach(ele => { ele.addEventListener('click', () => alert(ele.previousElementSibling.value)) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="hidden" name="myvalue" class="form-control input_text" value="aaa" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="bbb" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="ccc" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="ddd" /> <input type="button" class="clickme" value="Get Value" /> <input type="hidden" name="myvalue" class="form-control input_text" value="eee" /> <input type="button" class="clickme" value="Get Value" />