通过onclick动态创建的表单会立即消失

Question

I have dynamically created a button in my Javascript function and called another function onclick, as shown below.

streambtn =  document.createElement("button");
streambtn.setAttribute("onclick","createattribute()");

The createattribute() method opens a subdivision within the dynamically created form and this function is as follows.

function createattribute() {

        inputval.innerHTML = "Provide a Stream name and click to add attribute-type pairs to yours stream.";
        var input = document.createElement("input");
        input.type = "text";
        input.placeholder="Attribute name";
        input.id="attr"+attrID;
        input.className = "attr-textfield-style";
        inputval.appendChild(input);

        //Display the drop down menu

        var newDiv=document.createElement('div');
        var html = '<select>', attrtypes = typeGenerate(), i;
        for(i = 0; i < attrtypes.length; i++) {
            html += "<option value='"+attrtypes[i]+"'>"+attrtypes[i]+"</option>";
        }
        html += '</select>';
        newDiv.className="attr-combobox-style";
        newDiv.id="type"+attrID;
        newDiv.innerHTML= html;
        inputval.appendChild(newDiv);
        attrID++;

        alert("attrname id: "+input.id+" attrtype id: "+ newDiv.id);
    }

The inputval is a division within the dynamically created form where the newly created form elements from the createattribute() function will be appended to. But the issue that I'm facing right now, is that though the method is correctly called, the form(dynamically created form) immediately disappears in a split second once the streambtn is clicked. Once it is clicked, it displays the first line "Provide a Stream name and click to add attribute-type pairs to yours stream." in a flash and disappears. Is there a way to keep it onscreen and then hide it depending on any conditions(like after the user finishes entering the data corresponding to that newly opened form-> created via createattribute() method)?

Answer 1

Add type = "button" as <button> without type = "button" will act as submit button and over click of the submit buttopn, page will be unloaded.

streambtn =  document.createElement("button");
streambtn.type = 'button';
streambtn.setAttribute("onclick","createattribute()");