1

我只是这方面的新手。我有通过 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;
        }

};

有什么建议吗？谢谢。

4

4 回答 4

1

将按钮的 html 更改为：

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

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

于 2015-02-23T05:09:02.910 回答
0

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

<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>
于 2015-02-23T05:22:20.290 回答
0

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

<form name="noteSelectorForm" action="" accept-charset=utf-8>
于 2015-02-23T05:19:58.473 回答
0

用这个：

<input type="button" onClick="keySelectTwo()" value="Submit">
于 2015-02-23T05:34:53.820 回答