点击触发函数的按钮为何导致页面重载？

兄弟，问题一眼就能看出来——你表单里的按钮默认是提交类型（submit），点击时浏览器会自动提交表单，触发页面重载，所以你的生成段落函数虽然执行了，但页面一刷新就啥都看不到了。另外还有个小细节bug：你第二个输入框的id是textTwo，但JS里写的是testTwo（字母顺序错了），这会导致拿不到第二个输入框的值，得一起改！

问题根源 #

你写的按钮<button onclick="createParagraph()">Click Me</button>没有指定type属性，浏览器会默认把它识别为type="submit"，这种类型的按钮点击后会自动提交所在的表单，这就是页面强制重载的罪魁祸首。

解决方案（三种任选其一） #

方案1：给按钮添加type="button"（最推荐）

直接给按钮指定类型为普通按钮，彻底避免表单提交触发的刷新：

<button type="button" onclick="createParagraph()">Click Me</button>

同时修正JS里的id拼写错误：

console.log('everything is linked')
function createParagraph() {
 console.log('function called');
 var wordOne = document.getElementById('textOne').value;
 var wordTwo = document.getElementById('textTwo').value; // 把testTwo改成textTwo
 var paragraph = '<p>My first word is ' + wordOne + '. My second word is ' + wordTwo + '.</p>';
 document.getElementById('answer').innerHTML = paragraph;
}

方案2：在函数中阻止表单提交的默认行为

修改JS函数，添加event.preventDefault()来阻断默认的表单提交动作，记得要把事件参数传进函数：

console.log('everything is linked')
function createParagraph(event) {
 event.preventDefault(); // 阻止页面刷新的默认行为
 console.log('function called');
 var wordOne = document.getElementById('textOne').value;
 var wordTwo = document.getElementById('textTwo').value; // 修正id拼写
 var paragraph = '<p>My first word is ' + wordOne + '. My second word is ' + wordTwo + '.</p>';
 document.getElementById('answer').innerHTML = paragraph;
}

对应的HTML按钮要传入事件对象：

<button onclick="createParagraph(event)">Click Me</button>

方案3：移除表单标签（如果不需要表单功能）

如果你的页面本来就不需要表单提交的功能，直接删掉<form action="">和</form>标签，按钮就不会触发提交行为了。

测试效果 #

改完之后再点击按钮，页面就不会刷新了，生成的段落会正常显示在answer容器里。

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