点击按钮如何完全替换div内容？JavaScript新手求助

嘿，我来帮你搞定这个麻烦！先直接说导致所有JS失效的核心问题，再给你原生JS和jQuery两种解决方案，毕竟你提到想了解jQuery的用法~

问题出在哪？ #

你现在的代码里有两个关键错误：

1. 原生DOM元素没有html()方法：你写的document.getElementById("functions").html(...)是jQuery专属的写法，原生JavaScript里要修改元素内容得用innerHTML属性，这个错误会直接让脚本中断，导致所有后续JS都没法运行。
2. button2的onclick语法错误：HTML里的<button id="button2" onclick="works2" ...>少了括号，应该写成works2()，不然点击这个按钮根本不会触发对应的函数。

原生JavaScript解决方案（不用jQuery） #

先修正你的HTML，把button2的onclick补全括号：

<div id="functions"> 
  <button id="prob" onclick="myproblem()" type="button" title="prob"></button> 
  <button id="button1" onclick="works1()" type="button" title="button1"></button> 
  <button id="button2" onclick="works2()" type="button" title="button2"></button> 
</div>

然后修改myproblem()函数，把html()改成innerHTML，这里用模板字符串（反引号）让代码更整洁：

function myproblem() {
  document.getElementById("functions").innerHTML = `
    <button id="prob" onclick="myproblem()" type="button" title="prob"></button> 
    <button id="button3" onclick="works3()" type="button" title="button3"></button> 
    <button id="button4" onclick="works4()" type="button" title="button4"></button>
  `;
}

这样修改后，点击prob按钮就能正常替换控制面板的按钮，其他按钮的onclick也能正常工作了。

如果你想尝试jQuery的用法 #

如果确实想学习jQuery，步骤很简单：

1. 先引入jQuery文件：因为是本地页面，你可以下载最新的jQuery压缩版JS文件（比如jquery-3.7.1.min.js），放在和你的HTML文件同一个文件夹里，然后在HTML的<body>标签末尾添加引入代码：

<script src="jquery-3.7.1.min.js"></script>

2. 修改myproblem()函数为jQuery写法：

function myproblem() {
  $("#functions").html(`
    <button id="prob" onclick="myproblem()" type="button" title="prob"></button> 
    <button id="button3" onclick="works3()" type="button" title="button3"></button> 
    <button id="button4" onclick="works4()" type="button" title="button4"></button>
  `);
}

同样记得把HTML里button2的onclick改成works2()，这样就能用jQuery实现你想要的功能啦。

小提示：如果之后项目变大，推荐用事件监听替代内联的onclick（比如原生JS的addEventListener或者jQuery的.on('click', function(){...})），这样代码会更易维护，但现在先让功能跑起来最重要~

内容的提问来源于stack exchange，提问作者Slewth