javascript - 如何从 html 向 javascript 方法发送一些值并使用它们

Question

我正在尝试向 JavaScript 发送一些值。我知道这很简单。像这样

<button id="btn" onclick="doSomething()">Click</button>

我可以在“doSomething()”方法中使用我想要的值设置特定操作。

但是如果

<button id="btn" onclick="doSomething()">Click</button>
<button id="btn" onclick="doSomething()">Click</button>

如果两个元素有两个相同的 id 和相同的 onClick 方法怎么办？

我可以发送一些这样的值

<button id="btn" onclick="doSomething("someValue")">Click</button>

JavaScript

var value;
function doSomething(value) // value = someValue ?
{document.getElementById("logger").innerHTML = value;}

可以这样写吗？ 我知道这可以通过其他方法实现，但是，出于练习和培训的目的。 我想学习这样的东西。

Answer 1

If you are just learning and practicing JavaScript, you should learn to use it in a way that follows best-practices and standards.

在 HTML 中，id 属性值应始终是唯一的。这是如何区分一个特定元素和下一个元素的方法，因此不要重复 id。

其次，应避免使用内联 HTML 事件处理程序 (onclick=doSomething())。它们是一种非常古老的将 HTML 元素“连接”到回调函数的方法，但不是“Document Object Model (DOM) Event Standard”的一部分。它们会导致在幕后创建匿名全局包装函数，并且这些函数会干扰您可能拥有的任何回调中 this 的绑定(bind)。最后，他们创建“意大利面条代码”(JavaScript 和 HTML 交织在一起)，这使得阅读和调试代码变得更加困难。此外，使用内联事件处理程序通常会导致代码重复，这违反了“Don't Repeat Yourself ”(DRY)最佳实践。

相反，您应该像这样进行事件连接:

     // Wait until the window object reports that all the DOM elements have been read into memory
     window.addEventListener("DOMContentLoaded", function(){
       
         // Scan through the document, find the elements that are needed and store
         // references to them in variables.
         var btn1 = document.getElementById("btn1");
         var btn2 = document.getElementById("btn2");

         // "Wire up" the objects to the event(s) in question and supply
         // a reference to the event handling function. Since you asked 
         // about passing arguments to the callback function, we don't 
         // directly call it, we create a function around it that calls
         // it with whatever arguments you want.
       
         btn1.addEventListener("click", function(){
             doSomething("Some Value");
         });
  
         btn2.addEventListener("click", function(){
             doSomething("Some Other Value");
         });  
  
     });

     // Event callback for both buttons
     function doSomething(value){
        alert(value);
     }

<button id="btn1">Click Me</button>
<button id="btn2">Click Me</button>

Do you see how the code above keeps the HTML and the JavaScript completely separate? Not only is the "spaghetti code" gone and the code is more readable, but this technique also follows the concept of "separation of concerns".