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

Question

我的 javascript 函数无法正常工作，这里是相关代码：

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

和正文中调用函数的HTML：

<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>

但是，当我运行代码并触发 onClick 事件时，我在 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指的是elmntC.style.display="none"； deities.html:35指按钮的onClick函数调用

这是怎么回事？为什么会出现此错误，我该如何解决？已经尝试将脚本移动到正文底部，但无济于事。

此外，如果有人有任何想法可以更有效地执行此操作（即避免调用 getElementById），请告诉我。

P.S。对于那些好奇的人，这样做的目的是为我的玩家在 DnD 中构建一个神祇搜索工具——我是一个普通的 DM，并且认为当我的玩家想扮演牧师时，他们的生活会更轻松。在我获得第一个条目后，稍后将开始实施类来锚定搜索。

Answer 1

在 html 页面上调用 sState 函数时出现问题。

您需要将 onClick="sState(aegirSimp,aegirExp)" 替换为 onClick="sState('aegirSimp','aegirExp')" 以将 ID 值发送到 sState 函数。

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

调用函数时传递 ID 的方式出错

ID 应作为字符串传递，如下所示

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

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

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

html

javascript

css

runtime-error

getelementbyid