関数を使用してスタイルを追加する

Question

私は通常、関数を動作させるのに使うのと同じものを使用していますが、何らかの理由で「未定義のadd 'プロパティを読み取れません」と言います。

<input type=button id=b1 value="start" onclick=abc()> 
<script> 
function abc() { 
document.getElementById("p2").classlist.add("hidden") 
document.getElementById("pic1").classlist.remove('hidden') 
document.getElementById("p1").classlist.add("hidden") 
window.setimeout(sub1, 1000) 
} 
</script> 

Answer 1

classlistはclassListである必要があります。また、setimeoutの場合はsetTimeoutになります。最後に、入力要素のプロパティ値に関する引用符や、個々のステートメントの末尾にセミコロンがないことがあります。

div { 
 
    border: 1px solid #000; 
 
    margin: 1rem 0; 
 
    padding: .5rem; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<input type="button" id="b1" value="start" onclick="abc()"> 
 
<script> 
 
    function abc() { 
 
    document.getElementById("p2").classList.add("hidden"); 
 
    document.getElementById("pic1").classList.remove("hidden"); 
 
    document.getElementById("p1").classList.add("hidden"); 
 
    window.setTimeout(sub1, 1000); 
 
    } 
 
    
 
    function sub1() { 
 
    console.log("called!"); 
 
    } 
 
</script> 
 

 
<div id="p2">This is the p2 div</div> 
 
<div id="pic1" class="hidden">This is the pic1 div</div> 
 
<div id="p1">This is the p1 div</div>