CODEWITHSUNDEEP
javascripthtmlcssruntime-errorgetelementbyid
Thomas Riley
Thomas Riley

Reputation: 7

Why can't I change display style when using getElementById?

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 (i.e. by avoiding a getElementById call), please let me know.

P.S. 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.

Upvotes: 0

Views: 915

Answers (2)

Vicky Kumar
Vicky Kumar

Reputation: 1408

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>

Upvotes: 2

Derek Wang
Derek Wang

Reputation: 10193

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>

Upvotes: 4

Related Questions