JavaScript-Variablen verstehen

Question

Ich lerne JavaScript und versuche, mehr über die Sprache zu verstehen. Das Hauptproblem ist die Position der Initialisierung der Variablen. Wenn ich es in die Funktion einfügen funktioniert gut, aber wenn es aus ist funktioniert überhaupt nicht, aber die andere Variable namens "marcaDeSkate" sogar dachte, es ist aus der Funktion funktioniert gut.

Hier ist der Code, den ich mit bin zu spielen:

<label name="marcasDeSkate">Marcas de Skate:</label> 
<select id="marcasList" name="marcaList"> 
    <option value="Darkstar">Darkstar</option> 
    <option value="Element">Element</option> 
    <option value="Girl">Girl</option> 
</select> 
<input type="text" name="skatebrand" id="txtSkateBrand" /> 
<input type="button" value="Add Skate" id="btnAdd" /> 
<p id="demo"></p> 
<script> 
var marcaDeskate = document.getElementById("marcasList").value 
var btnAdd = document.getElementById("btnAdd"); 
var txtSkate = document.getElementById("txtSkateBrand").value /* the variable I'm testing */ 
btnAdd.addEventListener("click", addSkate); 
/* 
function addSkate() 
{ 

    alert(marcaDeskate + " " + txtSkate); 
} 
*/ 
function addSkate() { 
    document.getElementById("demo").innerHTML += marcaDeskate + " " + txtSkate + "<br/>"; 
} 
</script> 

Answer 1

Sie benötigen die txtSkate Variable innerhalb der addSkate Funktion init. Sie initialisieren die Variable txtSkate, bevor der Benutzer den Eingabewert schreibt.

Versuchen Sie folgendes:

var marcaDeskate = document.getElementById("marcasList").value 
 
var btnAdd = document.getElementById("btnAdd"); 
 
var txtSkate; 
 

 
btnAdd.addEventListener("click", addSkate); 
 

 
function addSkate() { 
 
    txtSkate = document.getElementById("txtSkateBrand").value; 
 
    document.getElementById("demo").innerHTML += marcaDeskate + " " + txtSkate + "<br/>"; 
 
}

<label name="marcasDeSkate">Marcas de Skate:</label> 
 
<select id="marcasList" name="marcaList"> 
 
    <option value="Darkstar">Darkstar</option> 
 
    <option value="Element">Element</option> 
 
    <option value="Girl">Girl</option> 
 
</select> 
 
<input type="text" name="skatebrand" id="txtSkateBrand" /> 
 
<input type="button" value="Add Skate" id="btnAdd" /> 
 
<p id="demo"></p>