无法用 javascript 替换 HTML 段落中的文本

Question

我正在尝试编写一个简单的网页，其中一个段落中的文本被两个可能的段落之一替换，具体取决于单击了哪个按钮。当我单击任一按钮时，什么都没有发生。我试过移动代码，但这似乎不起作用。 这是整个文档，已编辑以保留不必要的细节

var mypar = document.getElementById("default");
document.getElementById("one").onclick = "Story1()"

document.getElementById("two").onclick = "Story2()"
function Story1(){
mypar.innerHTML = "long paragraph";
}

function Story2(){
mypar.innerHTML = "long paragraph";
}

body {
background-color: blue;
}
.button{
border-radius: 8px;
display: inline-block;
text-align: center;
background-color: #4CAF50;
padding: 15px 32px;
font-size: 32px;


}
h1 {
text-align: center;
color: yellow;
text-decoration: underline;
text-shadow: 2px 2px;
}

p {
padding-right: 50px;
padding-left:250px;
text-align: justify;
color: white;
font-style: italic;
font-weight: bold;

}

<h1>
<img src="people.jpg" alt= "onetwo" >
<br>

<button class="button" id = "one"> one </button>
<button class="button" id = "two"> two</button>
 <br>

Heading </h1>

<p id = "p1"> 
long paragraph.</p>

<p id ="default">

</p>

<p id = "end">
written here
</p>

Answer 1

不要将事件处理程序指定为字符串。使用函数本身：

document.getElementById("one").onclick = Story1;

或者更好：

document.getElementById("one").addEventListener("click", Story1);

更新了sn-p：

var mypar = document.getElementById("default");
document.getElementById("one").addEventListener("click", Story1);

document.getElementById("two").addEventListener("click", Story2);

function Story1(){
mypar.innerHTML = "long paragraph 1";
}

function Story2(){
mypar.innerHTML = "long paragraph 2";
}

body {
background-color: blue;
}
.button{
border-radius: 8px;
display: inline-block;
text-align: center;
background-color: #4CAF50;
padding: 15px 32px;
font-size: 32px;


}
h1 {
text-align: center;
color: yellow;
text-decoration: underline;
text-shadow: 2px 2px;
}

p {
padding-right: 50px;
padding-left:250px;
text-align: justify;
color: white;
font-style: italic;
font-weight: bold;

}

<h1>
<img src="people.jpg" alt= "onetwo" >
<br>

<button class="button" id = "one"> one </button>
<button class="button" id = "two"> two</button>
 <br>

Heading </h1>

<p id = "p1"> 
long paragraph.</p>

<p id ="default">

</p>

<p id = "end">
written here
</p>

Answer 2

这里发现了两个问题——

• 第一个好像打错了，为什么两个函数的定义都差不多？
• 第二个是，您将函数放在字符串中。如果你想给他们打电话，你必须把他们放在引号里。

只是为了使两个函数的定义不同，我将要在 Story2 函数中替换的innerHTML 作为“短段落”而不是“长段落”。

    var mypar = document.getElementById("default");

    document.getElementById("one").onclick = Story1;

    document.getElementById("two").onclick = Story2;

    function Story1 () {
      mypar.innerHTML = "long paragraph";
    }

    function Story2 () {
      mypar.innerHTML = "short paragraph";
    }

Answer 3

只需更改html：

 <button id="one" onclick="Story1()"> one</button>

然后从您的 JAVASCRIPT 中删除 .onclick。

简单。

Answer 4

尝试使用DOM的EventListener，代码如下：

var mypar = document.getElementById("default");


document.getElementById("one").addEventListener('click', ()=>{
  mypar.innerHTML = "long paragraph one";
})

document.getElementById("two").addEventListener('click', ()=>{
  mypar.innerHTML = "long paragraph two";
})

body {
background-color: blue;
}
.button{
border-radius: 8px;
display: inline-block;
text-align: center;
background-color: #4CAF50;
padding: 15px 32px;
font-size: 32px;


}
h1 {
text-align: center;
color: yellow;
text-decoration: underline;
text-shadow: 2px 2px;
}

p {
padding-right: 50px;
padding-left:250px;
text-align: justify;
color: white;
font-style: italic;
font-weight: bold;

}

<h1>
<img src="people.jpg" alt= "onetwo" >
<br>

<button class="button" id = "one"> one </button>
<button class="button" id = "two"> two</button>
 <br>

Heading </h1>

<p id = "p1"> 
long paragraph.</p>

<p id ="default">

</p>

<p id = "end">
written here
</p>

Answer 5

试试看这个例子，它可以帮助触发点击事件：

// Function to change the content of t2
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// Add event listener to table
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);