无法触发仅一部分 javascript 的刷新

Question

这个问题的其他答案涉及时间，而这个问题涉及刷新 if 语句中的一部分 javascript。

一旦 HTML 页面加载，就会有一个可见的选择元素。根据选择的选项，将出现一组不同的输入字段。

我最初的问题是，当用户重新单击按钮时，我创建的“Submit()”函数将在旧输入字段上重绘相同的输入字段，从而导致混乱。当用户单击“提交”时，您会看到绘制相同的输入字段的次数。

我添加了一个名为 checkBool() 的函数来检查表单是否已绘制。如果有，那么它将调用 window.location.reload() 函数。如果没有，它只会调用我的 Submit() 函数。

代码现在不会堆积输入字段了。相反，当我第二次点击提交按钮时，即使选择了不同的选项，绘制的表单也会消失。

我想要发生的是当用户选择不同的选项并点击提交时，当前表单被删除并自动绘制新的表单集。

这是我的 checkBool() 函数：

var boolean = new Boolean();
function checkBool(){

    if(boolean==false){
        Submit();
    }else if(boolean==true){
        window.location.reload();
        boolean=0;
        Submit();
        return boolean;
    }
}

window.location.reload() 函数似乎立即重新加载脚本，浏览器从不执行“Submit()”函数。

Answer 1

我找到了问题的答案。

我可以删除所有元素，而不是刷新 javascript。这就是我试图通过找到一种“刷新”页面的方法来做的事情。

我可以策略性地将元素放置在 div 中并使用 removeChild() 函数，而不是隐藏元素并在不同位置留下巨大间隙。

这是一个如何工作的例子......

这是我的html：

<button type="button" onclick="draw()">Draw</button>
<button type="button" onclick="erase()">Erase</button>
<div id="parent">

</div>

这是我的 javascript：

    function draw(){
     `docume`nt.getElementById("test").innerHTML=InputField("parent","child","text",5,10).value;
}

function erase(){
    var parent =document.getElementById("parent");
    var child = document.getElementById("child");
    parent.removeChild(child);


}

所以这里发生的是当用户单击“绘制”按钮时调用 draw() 函数。此函数创建一个输入字段。

我创建了自己的函数，该函数将使用我传递的变量绘制一个输入字段。这就是 InputField() 函数的全部意义所在。

之后用户点击“擦除”按钮调用擦除函数。

erase 函数抓取名为“parent”的父元素和子元素（在本例中称为“child” - 你可以看到我将名称“child”传递给了 InputField() 函数）

然后使用代码的 remove.Child(child) 部分删除子元素。

如果你将 jquery 下载到你的网页中，你可以使用 removeDiv() 函数来做同样的事情。

Answer 2

我的选择是将不同的表单绘制到不同的 div 中，最初没有显示。选择框或提交按钮的 onchange 事件在此 div 中循环，根据是否为请求的表单设置 .style.visibility='hidden' 或 'visible'。

这还具有可用性优势，如果用户在开始填写表格后改变主意，后来又改变主意，他的输入仍然存在。