JavaScript的問題無法使用功能與HTML標籤

Question

我創建了一個JavaScript的運動改變HTML對象的ID。

我想建立一個按鈕，將選擇之間循環。此時按鈕不執行該功能。

請看看代碼，讓我知道我做錯了。

a = 0; 
 
n = 1; 
 
i = 0; 
 

 
function changexc(a, n) { 
 
    document.getElementById('effect00').id = "effect00" + (a + i); 
 
} 
 

 
function counterxc() { 
 
    i = n++; 
 
    return n; 
 
} 
 

 

 
document.write("<br>" + "a is " + a + "<br>"); 
 

 
document.write(" i is " + i + "<br>"); 
 

 
document.write(" n is " + n + "<br>"); 
 

 
document.write(" n + a is " + (n + a) + "<br>"); 
 

 

 

 
changexc(a);

<style>#effect001 { 
 
    max-width: 100px!important; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: block; 
 
} 
 

 
#effect002 { 
 
    max-width: 200px!important; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: block; 
 
} 
 

 
#effect003 { 
 
    max-width: 300px!important; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    background-color: yellow; 
 
    display: block; 
 
} 
 

 
</style>

<div id="effect00"></div> 
 

 
<button type="button" id="thatdarnbutton" onclick="counterxc()">Click Me</button>

Answer 1

此代碼的工作 - 見下文

var a = 0; 
 
var n = 1; 
 
var i = 0; 
 

 
function changexc() { 
 
    console.log(" added class : " + "effect00" + (a + i)); 
 
    document.getElementById("effect00").className = "effect00" + (a + i); 
 

 
    console.log("<br>" + "a is " + a + "<br>"); 
 

 
    console.log(" i is " + i + "<br>"); 
 

 
    console.log(" n is " + n + "<br>"); 
 

 
    console.log(" n + a is " + (n + a) + "<br>"); 
 

 

 

 

 
} 
 

 
function counterxc() { 
 
    i = n + 1; 
 
    n++; 
 
    
 
    if(n >3) { 
 
    n = 0; 
 
    } 
 
    
 
    changexc(); 
 
} 
 

 

 

 

 
changexc();

.effect001 { 
 
    max-width: 100px!important; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: block; 
 
} 
 

 
.effect002 { 
 
    max-width: 200px!important; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: block; 
 
} 
 

 
.effect003 { 
 
    max-width: 300px!important; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    background-color: yellow; 
 
    display: block; 
 
}

<div id="effect00"> 
 

 
    hello world! 
 

 
</div> 
 

 
<button type="button" onClick="counterxc();">Click Me</button>

它的解釋只是 「使用嚴格的」; javascript環境（節點，瀏覽器等）會假設/說你不能在聲明它們之前使用變量，我建議你這樣做。其良好的做法：

然而，正如其他有評論 - 從基礎做起，學會瀏覽器如何使用JavaScript以及其他環境中，如節點。我仍然習慣於新的ES6和ES7語法以及所有新的構建系統。它的一大堆在此一提，但我會建議：「你不知道JS」系列書籍

Answer 2

你的代碼工作正常，但需要一點點的工作。 在開始工作之前，您必須先確定所有元素已被加載use setTimeout。 往下看，我這裏能解決問題，這應該現在工作

a = 0; 
 
n = 1; 
 
i = 0; 
 
var id = "effect00"; 
 

 
function changexc(a, n) { 
 
    document.getElementById(id).setAttribute("id", "effect00" + (a + i)); 
 
    id = "effect00" + (a + i); 
 
} 
 

 
function counterxc() { 
 
    i = n++; 
 
    write(); 
 
    return n; 
 
} 
 

 
function write() { 
 
    var resultDiv = document.getElementById(id); 
 
    var resultstring = "<br>" + "a is " + a + "<br>" 
 
    resultstring += " i is " + i + "<br>" 
 
    resultstring += " n is " + n + "<br>" 
 
    resultstring += " n + a is " + (n + a) + "<br>" 
 
    resultstring += "id is " + "effect00" + (a + i); 
 
    resultDiv.innerHTML = resultstring; 
 
    changexc(a) 
 
} 
 

 
setTimeout(function() { /// this is importent, wait untill elemtns have loaded 
 

 
    changexc(a); 
 
    write(); 
 

 
}, 100);

#effect001 { 
 
    max-width: 100px!important; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: block; 
 
} 
 

 
#effect002 { 
 
    max-width: 200px!important; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: block; 
 
} 
 

 
#effect003 { 
 
    max-width: 300px!important; 
 
    height: 300px; 
 
    border-radius: 50%; 
 
    background-color: yellow; 
 
    display: block; 
 
}

<button type="button" id="thatdarnbutton" onclick="counterxc()">Click Me</button> 
 

 
<div id="effect00"></div>