为什么在使用 getElementById 时无法更改显示样式？

Question

I'm having trouble getting my javascript function to work, here's the relevant code:

<script>
function sState(elmntC,elmntO) {
    elmntC=document.getElementById(elmntC);
    elmntO=document.getElementById(elmntO);
    elmntC.style.display="none";
    elmntO.style.display="block";
}
</script>

And the HTML in the body which is calling the function:

<div id="aegir">
    <table id="aegirSimp">
        <tr>
            <th class="name">Aegir</th>
            <th class="alignment">NE</th>
            <th class="title">God of the Sea and Storms</th>
            <th class="domains">Tempest</th>
            <th class="button"><button type="button" onClick="sState(aegirSimp,aegirExp)">+</button></th>
        </tr>
    </table>
    <p id="aegirExp">Aegir<br>CG god of the Sea and Storms<br>Domains: Tempest<br>Symbol: Rough ocean waves<br><br>Norse god of storms and seas, Aegir dwells in an immense hall at the bottom of the seas according to legend.<br><button type="button" id="aegirBC">x</button></p>
</div>

However, when I run the code and trigger the onClick event, I get the following error in Inspect Element:

deities.html:21 Uncaught TypeError: Cannot read property 'style' of null at sState (deities.html:21) at HTMLButtonElement.onclick (deities.html:35)

deities.html:21 refers to elmntC.style.display="none"; deities.html:35 refers to the button onClick function call.

What's going on here? Why am I getting this error, and how can I fix this? Already tried moving the script to the bottom of the body, to no avail.

Also, if anyone has any ideas to do this more efficiently (ie by avoiding a getElementById call), please let me know.

PS for those curious, the purpose of this is to build a deity search tool for my players in DnD - I'm a regular DM, and thought it would make my players' lives easier when they want to play a cleric. Gonna start implementing classes to anchor the searches later, after I get the first entry working.

Answer 1

There is a problem on calling sState function on html page.

You need to replace onClick="sState(aegirSimp,aegirExp)" to onClick="sState('aegirSimp','aegirExp')" to send the id values to sState function.

 function sState(elmntC,elmntO) { elmntC=document.getElementById(elmntC); elmntO=document.getElementById(elmntO); elmntC.style.display="none"; elmntO.style.display="block"; }

 <div id="aegir"> <table id="aegirSimp"> <tr> <th class="name">Aegir</th> <th class="alignment">NE</th> <th class="title">God of the Sea and Storms</th> <th class="domains">Tempest</th> <th class="button"><button type="button" onClick="sState('aegirSimp','aegirExp')">+</button></th> </tr> </table> <p id="aegirExp">Aegir<br>CG god of the Sea and Storms<br>Domains: Tempest<br>Symbol: Rough ocean waves<br><br>Norse god of storms and seas, Aegir dwells in an immense hall at the bottom of the seas according to legend.<br><button type="button" id="aegirBC">x</button></p> </div>

Answer 2

Error is in the way you are passing ids while calling your function

Ids should be passed as string as below

 <th class="button"><button type="button" onClick="sState('aegirSimp','aegirExp')">+</button></th>