無法用 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

不要將事件處理程序指定為字符串。 使用 function 本身：

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

或者更好：

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

更新片段：

 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 function中替換的 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);