Question

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

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

我可以在“doSomething（）”方法中使用我想要的vlaue设置一个特定的动作。

但是如果

<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

如果您只是在学习和练习JavaScript，那么您应该学习以符合最佳实践和标准的方式使用它。

在HTML中， id属性值应始终为唯一。这是如何告诉下一个特定元素，所以不要复制id。

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

相反，你应该做这样的事件接线：

＆＃13;

     // 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);
     }

＆＃13;

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

＆＃13;

您是否看到上面的代码如何保留HTML和JavaScript 完全分开？不仅是＃34;意大利面条代码＆＃34;走了代码更具可读性，但这种技术也遵循了这一概念＆＃34; separation of concerns＆＃34;

Answer 2

首先，您不应该在页面上有两个具有相同ID的元素。它不会给你一个错误，但它在语义上是不正确的。

现在，回答你的问题。您可以从页面上的N个元素中调用1方法，并将不同的值传递给它。无论ID是相同还是不同，都无关紧要。

所以

<button id="btn" onclick="doSomething('Some value')">Click</button>
<button id="btn" onclick="doSomething('Some other value or even some value')">Click</button>

非常好。但是我会做这样的事情

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

Answer 3

您应该更改ID并使其成为单独的名称。如果你想让他们做同样的事情，只需一起选择它们。您可以在2个不同的按钮上使用ID，ID对于该特定元素是唯一的。你也可以给他们相同的班级名称

    $('#bt1, #btn2').html(value) //id

或

    $('.btn').html(value) //class

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

3 个答案: