Question

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

这是与javascript函数相关的html：

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

这是javascript（从单独的文档中调用）：

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

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

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

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

第一个函数运行得很好，但第二个函数（changeButton）什么都不做。我无法弄清楚出了什么问题。

编辑：我把它放在小提琴里，所以我在这里分享这个链接，你会发现 - https://jsfiddle.net/a9gd4cjz/

Answer 1

当你这样做时

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

然后elem是div，而div没有value。

你可能想要

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

旁注：重复字符串的代码难以维护。解决方案是在变量中声明它们一次。

Answer 2

您正在按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";
};

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

Answer 3

我认为问题在于：

document.getElementById("toggle_button");

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

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

从div中删除id。

Answer 4

你的代码错了。

更改

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

到

var elem = document.getElementById("toggle_button").childNodes[0];

修改

以下是改进的代码：

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>

CSS：

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

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：http://codepen.io/anon/pen/dYPmzP

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

4 个答案: