javascript - document.ElementID('id').innerHTML = go 只闪烁一次然后就消失了

Question

我正在编写一小段代码。本质上，我正在采用自定义形成的字符串并将其转换为 json。它有效，但我写的部分只是在页面上闪烁并且消失了。当我将 document.getElementId..... 放在函数调用之外时，它说未定义。关于如何对抗这个有什么想法吗？

Input like:
    pizzas@size:"large";toppings:sausage
<form name="form1" onsubmit="getString()">
    <input type="text" name="txtJob" id="txtJob" value="">
    <input type="submit" value="Submit">
</form>
<p id="myJson"></p>
<script>
    var myString, w, tableName, x;
    function getString(){
        myString = document.getElementById("txtJob").value;
        w = myString.split("@");
        tableName = w[0];
        alert(tableName);
        x = w[1].split(";");
        myLength = x.length-1;
        document.getElementById("myJson").innerHTML=
        '<h1>'+ tableName + '</h1>';
    }

</script>

提前致谢。

Answer 1

它正在消失，因为一旦表单提交，它就会重新加载页面。解决方案是return false从onsubmit处理程序。这可以防止发生默认操作（提交）。例如，

<form name="form1" onsubmit="getString();return false;">
    <input type="text" name="txtJob" id="txtJob" value="pizzas@size:&quot;large&quot;;toppings:sausage">
    <input type="submit" value="Submit">
</form>
<p id="myJson"></p>
<script>
    var myString, w, tableName, x;
    function getString(){
        myString = document.getElementById("txtJob").value;
        w = myString.split("@");
        tableName = w[0];
        alert(tableName);
        x = w[1].split(";");
        myLength = x.length-1;
        document.getElementById("myJson").innerHTML=
        '<h1>'+ tableName + '</h1>';

    }

</script>

小提琴