Javascript 第二个功能是不更改我的按钮的值

我正在尝试切换目录。我可以让ToC正确切换，但我想运行第二个函数来更改按钮的文本，以反映页面上的内容。如果ToC隐藏，按钮应显示“显示”，如果ToC显示，按钮应显示“隐藏”

以下是与javascript函数相关的html：

<div id="toggle_button">
<input type="button" value="Show the Table of Contents" onclick="toggle(); changeButton();"></input>
</div>

第一个函数运行得很好，但是第二个函数（changeButton）什么也不做。我不知道怎么了

编辑： 我在fiddle中运行了它，所以我在这里为您共享该链接-

var elem = document.getElementById("toggle_button");

然后

elem

是一个div，而div没有

值

你可能想要

var elem = document.querySelector("#toggle_button input[type=button]");

旁注：带有重复字符串的代码更难维护。解决方法是在变量中声明它们一次。
如果按id选择了错误的元素，则需要像这样为输入按钮分配id

var changeButton = function() {
    var elem = document.getElementById("my_button_id");

    if (elem.value === "Show the Table of Contents")        
        elem.value = "Hide the Table of Contents";
    else
        elem.value = "Show the Table of Contents";
};


我认为问题在于：

document.getElementById("toggle_button");

这是包含按钮的div的ID，而不是按钮本身。
试试这个：

<input id="toggle_button" type="button" value="Show the Table of Contents" onclick="toggle(); changeButton();"></input>



然后从div中删除id。
您的代码错误

改变

var elem = document.getElementById("toggle_button");

到

编辑：

以下是改进后的代码：

HTML:

    <div id="toggle_button_container">
        <button id="toggle_button" class="show" type="button" value="Show the Table of Contents" onclick="toggle(); changeButton();"></button>
    </div>

JavaScript:

    function toggle() {
        var Table = document.getElementById('ToC');

        if (Table.style.display === 'inline-block' || Table.style.display === '')       
            Table.style.display = 'none';
        else
            Table.style.display = 'inline-block';
    }

    function changeButton() {
        var elem = document.getElementById("toggle_button");

        if (elem.className == "show")        
            elem.className ="hide";
        else
            elem.className ="show";
    }

而且，如果您使用的是此代码，请忘记我的第一个答案

CodePen:
你能不能用小提琴再现这个问题……下面是我正在用小提琴处理的所有事情：这似乎不管用。行为没有改变。尽管如此，我还是做出了改变——可能会修复所有错误，而不仅仅是根本问题。我补充了这一点，但它没有做任何事情。什么是“.childNodes[0]”？该怎么办？childNode提供了一个子DOM元素数组，[0]表示第一个（在您的例子中是唯一的一个）。而且，如果您注意到了，我添加了新的代码，它肯定可以工作。
var elem = document.getElementById("toggle_button").childNodes[0];

    <div id="toggle_button_container">
        <button id="toggle_button" class="show" type="button" value="Show the Table of Contents" onclick="toggle(); changeButton();"></button>
    </div>

    button#toggle_button.show:after {
        content:"Show the Table of Contents";
    }

    button#toggle_button.hide:after {
        content:"Hide the Table of Contents";
    }

    function toggle() {
        var Table = document.getElementById('ToC');

        if (Table.style.display === 'inline-block' || Table.style.display === '')       
            Table.style.display = 'none';
        else
            Table.style.display = 'inline-block';
    }

    function changeButton() {
        var elem = document.getElementById("toggle_button");

        if (elem.className == "show")        
            elem.className ="hide";
        else
            elem.className ="show";
    }