Javascript değişkenlerini anlama

Question

Javascript'i öğreniyorum ve dili daha iyi anlamaya çalışıyorum. Asıl konu, değişkenin başlatılmasının pozisyonudur. Eğer bu işlevin içine koyarsam iyi çalışıyor ama eğer işe yaramıyorsa, ama "marcaDeSkate" adlı diğer değişken bile fonksiyonun iyi çalıştığını düşündü. Sen addSkate işlevi içinde txtSkate değişken init gerekir

<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

:

İşte oynuyorum kod. Kullanıcı giriş değerini yazmadan önce txtSkate değişkenini başlatıyorsunuz.

bu deneyin:

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>