Question

我遇到了JavaScript问题。 我想要发生的事情：点击“修改HTML内容”后，将“原始内容”h1标题更改为“新内容”，再次点击时，“新内容”更改为“原始内容”。单击“删除HTML内容”按钮时，h1标题将消失，再次单击时，空白将更改为“原始内容”。相反，没有任何反应。 h1标题保持不变。有人可以帮忙吗？

HTML：

<html>
<head>
<title>Content Change</title>
<script type="text/javascript" src="contentchange.js"></script>
</head>
<body>
<h1 id="heading"><b>The Original Content</b></h1>
<br/>
<button type="button" onclick="change()" id="button_one">Modify HTML content</button>
<button type="button" onclick="change_2()" id="button_two">Delete HTML content</button>
</body>
</html>

JavaScript的：

//Code for the Modify HTML content button
function change()
{
var elem = document.getElementById("button_one");

if (h1.value=="The Original Content") 
{h1.value = "The New Content";}
else
{h1.value = "The Original Content";}
}

//Code for the Delete HTML content button
function change_2()
{
var elemtwo = document.getElementById("button_two");

if (h1.value=="The Original Content" || "The New Content")
{h1.value = "";}
else
{h1.value="The Original Content"}
}

Answer 1

您可能需要按如下方式设置h1变量：

var h1 = document.getElementById('heading');

然后使用innerHTML代替value进行更改。

另外，您需要检查b标签，如下所示：

if (h1.innerHTML === "<b>The Original Content</b>" ||
    h1.innerHTML === "<b>The New Content</b>"
   )

小提琴：http://jsfiddle.net/Ls5osy22/2/

Answer 2

您需要对HTML进行一次更改，即替换

<h1 id="heading"><b>The Original Content</b></h1>

使用

<h1 ><b id="heading">The Original Content</b></h1>

::更改JavaScript代码::

function change(){
    var elem = document.getElementById("heading");
    if (elem.innerHTML=="The Original Content"){
        elem.innerHTML = "The New Content";
    }
    else{
        elem.innerHTML = "The Original Content";
    }
}

function change_2(){
    var elem = document.getElementById("heading");
    if (elem.innerHTML=="The Original Content" || elem.innerHTML=="The New Content"){
        elem.innerHTML = "";
    }
    else{
        elem.innerHTML="The Original Content"
    }
}

Answer 3

...如果你为什么不想同时使用h1.innerHTML === "<b>The Original Content</b>"和<h1 ><b id="heading">The Original Content</b></h1>，你可以使用.textContent。

Fiddle

function change()
{
    var h1 = document.getElementById("heading");
    if (h1.textContent == "The Original Content")
    {
        h1.textContent = "The New Content";
    }
    else
    {
        h1.textContent = "The Original Content";
    }
}

function change_2()
{
    var h1 = document.getElementById("heading");
    if (h1.textContent == "The Original Content" || h1.textContent == "The New Content")
    {
        h1.textContent = "";
    }
    else
    {
        h1.textContent = "The Original Content";
    }
}

只是为了完整性fiddle以及如何在问题标签jQuery中提到它。

用按钮改变标题

3 个答案: