Question

我只是新人。我有通过JavaScript函数生成div的代码。 div已成功创建，但会在几秒钟内消失。

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="../style.css">
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript" src="music.js"></script>
</head>

<body>
    <div id="formDiv">
        <form name="noteSelectorForm" accept-charset=utf-8>
            <Select name="noteSelector">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
                <option value="E">E</option>
                <option value="F">F</option>
                <option value="G">G</option>
            </select><br>
            <input type="radio" name="Note" value="Nil" checked>Nil<br>
            <input type="radio" name="Note" value="Sharp">Sharp<br>
            <input type="radio" name="Note" value="Flat">Flat<br>
            <button onClick="keySelectTwo()">Submit</button>
        </form>
        <div id="printSelectedNote">
        </div>

    </div>
</body>

Javascript：

var keySelectTwo = function(){

        var x = document.noteSelectorForm.noteSelector.value;
        var travelerInfo = '<div>'+x+'</div>';
        var first = 0;
        if(document.getElementById("printSelectedNote").child){
            alert("test");
        }
        else{
            document.getElementById("printSelectedNote").innerHTML += travelerInfo;
        }

};

有什么建议吗？感谢。

Answer 1

将按钮的html更改为：

<button type="button" onClick="keySelectTwo()">Submit</button>

这将阻止它提交表单并刷新页面。

Answer 2

因为您使用的是表单标记，所以在单击按钮后，表单标记会加载新页面。您可以做的是在表单标记中添加操作。

<form name="noteSelectorForm" action="" accept-charset=utf-8>

Answer 3

您可以通过在表单外写这样的按钮来避免刷新页面

<div id="formDiv">
    <form name="noteSelectorForm" accept-charset=utf-8>
        <Select name="noteSelector">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
        </select>
        <br>
        <input type="radio" name="Note" value="Nil" checked>
        Nil
        <br>
        <input type="radio" name="Note" value="Sharp">
        Sharp
        <br>
        <input type="radio" name="Note" value="Flat">
        Flat
        <br>
        </form>
        <button onClick="keySelectTwo()">
            Submit
        </button>
        <div id="printSelectedNote"></div>

    </div>

或将其类型更改为按钮

 <button type="button" onClick="keySelectTwo()">Submit</button>

Answer 4

使用此：

<input type="button" onClick="keySelectTwo()" value="Submit">

JavaScript生成的div不断消失

4 个答案: