I'm trying to create a text field that displays the input right after "go" button is pressed. But when I press the button it clears out all the elements.
HTML
<div id = "sideMenu">
<ul>
<li id="r">
<span><img class="piece" src="vazirRed.png"></span>
Red Player<input type="text" id="input" value="name">
<button onclick="write();">go</button>
</li>
<li>
<span><img class="piece" src="vazirBlue.png"></span>
Blue Player<input type="text" value="name">
<button onclick="write();">go</button>
</li>
</ul>
</div>
JS
function write(){
var inputRed=document.getElementById("input");
var redName = inputRed.value;
var name = document.createElement("div");
name.appendChild(redName);
//document.getElementById("#r").innerHTML += redName;
}
onLoad
option in JSFiddle affects the scope of the JavaScript you input. Simple example doesn't work on JSFiddle