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

我试着写一个简单的网页，其中一个段落中的文本被两个可能的段落中的一个替换，这取决于点击哪个按钮。单击任一按钮都不会发生任何事情。我试着把代码移动，但似乎不起作用。 这是整个文档，经过编辑以避免不必要的细节

var mypar=document.getElementByIddefault； document.getElementByIdone.onclick=Story1 document.getElementByIdtwo.onclick=Story2 功能故事1{ mypar.innerHTML=长段落； } 功能故事2{ mypar.innerHTML=长段落； } 身体{ 背景颜色：蓝色； } .按钮{ 边界半径：8px； 显示：内联块； 文本对齐：居中； 背景色：4CAF50； 填充：15px 32px； 字体大小：32px； } h1{ 文本对齐：居中； 颜色：黄色； 文字装饰：下划线； 文本阴影：2px2px； } p{ 右边填充：50px； 左侧填充：250px； 文本对齐：对齐； 颜色：白色； 字体：斜体； 字体大小：粗体； } 一 二 标题

长段落

    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";
    }

写在这里

---

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

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

或者更好：

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

更新的代码段：

var mypar=document.getElementByIddefault； document.getElementByIdone.addEventListenerclick，故事1； document.getElementByIdtwo.addEventListenerclick，故事2； 功能故事1{ mypar.innerHTML=长段落1； } 功能故事2{ mypar.innerHTML=长段落2； } 身体{ 背景颜色：蓝色； } .按钮{ 边界半径：8px； 显示：内联块； 文本对齐：居中； 背景色：4CAF50； 填充：15px 32px； 字体大小：32px； } h1{ 文本对齐：居中； 颜色：黄色； 文字装饰：下划线； 文本阴影：2px2px； } p{ 右边填充：50px； 左侧填充：250px； 文本对齐：对齐； 颜色：白色； 字体：斜体； 字体大小：粗体； } 一 二 标题

长段落

    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";
    }

写在这里

---

尝试查看此示例，它有助于跳跳虎点击事件：

// 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);

---

在这里发现了两个问题-

第一个看起来像是打字错误，为什么这两个函数的定义是相似的？ 第二个是，将函数放入字符串中。如果你想给他们打电话，你必须把他们从报价中剔除。 为了使这两个函数的定义不同，我将在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";
    }

只需更改html：

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

并从JAVASCRIPT中删除.onclick

简单

尝试使用的EventListener查看以下代码：

var mypar=document.getElementByIddefault； document.getElementByIdone.addEventListener'click'，=>{ mypar.innerHTML=长段落一； } document.getElementByIdtwo.addEventListener'click'，=>{ mypar.innerHTML=长段落2； } 身体{ 背景颜色：蓝色； } .按钮{ 边界半径：8px； 显示：内联块； 文本对齐：居中； 背景色：4CAF50； 填充：15px 32px； 字体大小：32px； } h1{ 文本对齐：居中； 颜色：黄色； 文字装饰：下划线； 文本阴影：2px2px； } p{ 右边填充：50px； 左侧填充：250px； 文本对齐：对齐； 颜色：白色； 字体：斜体； 字体大小：粗体； } 一 二 标题

长段落

    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";
    }

写在这里

---

应用代码后，新段落仍不显示。也许绳子的长度是有限制的？@thehandthattaksback-有限制的，但它是巨大的。我非常怀疑你是否达到了极限。为什么我会收到-1 LOL