被innerHTML修改过的文本不会保持可见

Text modified by innerHTML won't stay visible

本文关键字：文本 innerHTML 修改      更新时间：2023-09-26

我有一个函数，如果满足条件，它应该在p元素中显示一条消息。该函数运行良好，但发送到'output1'的文本在您按下按钮时短暂出现，然后消失。我试过把JS在头部和身体，但它似乎没有什么不同。什么好主意吗?谢谢。

HTML: 

<p id="output1"><p>
Javascript: 

<script>
function logicProcess() {
    // alert('function launched');
    if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
        document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
        }
    else {
        document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
        }
}       
</script>

innerHTML不可见的原因是因为有某种类型的onclick方法正在重置表单。如果这是真的，像这样编辑你的onclick方法:

onClick="function();return false;"

这里的变化是;返回false;

你没有告诉我们你是如何调用这个函数的，但是很有可能你是在响应一个表单的提交按钮被按下。

这将修改DOM，然后提交表单，这将导致加载一个新页面。

你需要取消表单的默认行为来阻止它被提交。

function logicProcess(evt) {
    // All your other code
    evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);

我认为你使用的是输入类型submit，所以submit按钮的含义是提交表单并重新加载它，这就是为什么你的输出不包含内部html。改为

<input type="button" />
相关文章：