I am making a simple web site program which would show the user text input after the user types some text and clicks the button. For that I made a function called "textWrite()", which would execute when the button OK is clicked. However, when I click the button, the text appears for a really short period of time and quickly after disappears.
Here's my code:
body {
background-image: url(http://ift.tt/2fQGWVn);
}
#inputCharacter {
height: 400px;
width: 400px;
background-color: rgba(0, 60, 200, 0.6);
position: relative;
left: 560px;
top: 80px;
border-radius: 5px;
}
#inputField {
height: 20px;
width: 260px;
margin-left: 65px;
margin-top: 100px;
padding: 5px;
}
#heading {
position: relative;
text-align: center;
top: 90px;
font-size: 24px;
font-family: Verdana;
}
#submit {
height: 30px;
width: 60px;
margin-left: 170px;
margin-top: 10px;
background-color: limegreen;
border: 3px solid black;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title>Character Split</title>
<link rel="stylesheet" type="text/css" href="inputDesign.css">
</head>
<body>
<form id="inputCharacter">
<h2 id="heading">Type some text</h2>
<input type="text" name="text" id="inputField" autocomplete="off"> <br>
<button type="submit" id="submit" onclick="textWrite()">OK</button>
<p id="output">
<script type="text/javascript">
function textWrite () {
var inputValue = document.getElementById('inputField').value;
document.getElementById('output').innerHTML = inputValue;
}
</script>
</p>
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire