JavaScriptでHTMLタグの機能を使用できない

Question

HTMLオブジェクトのIDを変更するJavaScriptの課題を作成しました。

選択肢の間を循環するボタンを設定したいと思います。今すぐボタンは機能を実行していません。

コードを見て、私が間違っていることを教えてください。

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>