CODEWITHSUNDEEP
javascripthtmlgenerated
Jas
Jas

Reputation: 25

JavaScript generated div keeps disappearing

I'm only new at this. I have the code that generates a div through a JavaScript function. The div is created successfully, but disappears within a few seconds.

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;
        }

};

Any advice? Thanks.

Upvotes: 1

Views: 676

Answers (4)

SOURAV
SOURAV

Reputation: 314

Use this:

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

Upvotes: 0

Zain Aftab
Zain Aftab

Reputation: 701

you can avoid refreshing the page by writing the button outside the form like this

<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>

or by changing its type to button

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

Upvotes: 0

GouravR
GouravR

Reputation: 184

Because you are using a form tag, after the click of the button the form tag loads a new page. What you can do is add action in form tag.

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

Upvotes: 0

winhowes
winhowes

Reputation: 8065

Change your button's html to this:

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

This will prevent it from submitting the form and refreshing the page.

Upvotes: 1

Related Questions