Wie man JavaScript-Methode einige Werte aus HTML senden und sie verwenden

Question

Ich versuche, einige Werte an Javascript zu senden. Ich weiß, das ist sehr einfach. wie dieser

Ich kann eine bestimmte Aktion mit meinem gewünschten vlaue in "doSomething()" -Methode festlegen.

Aber wenn

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

Was passiert, wenn zwei Elemente zwei gleiche Ids und gleiche onClick Methode haben.

Kann ich einige Werte wie dieses

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

JavaScript senden

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

Ist es möglich, so etwas zu schreiben? Ich weiß, dass dies mit anderen Methoden möglich ist, aber für die Praxis und Trainingszwecke. Ich möchte so etwas lernen.

Answer 1

Zunächst sollten Sie nicht zwei Elemente auf der Seite mit identischen IDs haben. Es wird Ihnen keinen Fehler geben, aber es ist semantisch falsch.

Jetzt kommt zu Ihrer Frage. Sie können eine Methode aus N Elementen auf der Seite aufrufen und unterschiedliche Werte an sie übergeben. Es spielt keine Rolle, ob die ID gleich oder verschieden ist.

So

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

ist völlig in Ordnung. Allerdings würde ich so etwas wie dieses

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

Answer 2

tun

Sie sollten Ihre IDs ändern und sie getrennte Namen machen. Wenn Sie die gleichen Dinge machen wollen, wählen Sie sie zusammen aus. Sie können IDs auf 2 verschiedenen Schaltflächen haben, IDs sind für dieses spezifische Element eindeutig. Sie können auch geben ihnen nur den gleichen Klassennamen

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

oder

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

Answer 3

Wenn Sie nur das Erlernen und Üben Sie JavaScript, um Sie lernen sollte es in einer Art und Weise zu verwenden, die best- folgt Praktiken und Standards.

In HTML, sollten id Attributwerte immer eindeutig sein. So kann man ein bestimmtes Element von dem nächsten unterscheiden, also nicht duplizieren id.

Zweitens, Verwendung von Inline-HTML-Event-Handler (onclick=doSomething()) sollte vermieden werden. Sie sind ein sehr alter Ansatz, HTML-Elemente mit Callback-Funktionen zu verschalten, sind aber nicht Teil von "Document Object Model (DOM) Event Standard". Sie verursachen anonyme globale Wrapper-Funktionen, die hinter den Kulissen erstellt werden, und diese Funktionen beeinträchtigen die Bindung von this in einem beliebigen Callback, das Sie möglicherweise haben.Schließlich erstellen sie "Spaghetti-Code" (Ihr JavaScript und HTML sind miteinander verflochten), was das Lesen und Debuggen Ihres Codes erschwert. Darüber hinaus führt die Verwendung von Inline-Event-Handlern in der Regel zu einer Duplizierung von Code, was die Best Practices "Don't Repeat Yourself" (DRY) verletzt.

Stattdessen sollten Sie Ihre Veranstaltung Verdrahtung wie folgt tun:

 // 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>

Sehen Sie, wie Sie den Code über den HTML-Code hält und die JavaScript- vollständig trennen? Nicht nur ist der "Spaghetti Code" weg und der Code ist besser lesbar, aber diese Technik folgt auch dem Konzept von "separation of concerns".