Please find the error in here. After clicking the button the words appears and dissappears in the box

Question

<!doctype html>
<html>
<body>

<form>
    <button onclick="myFunction()"> Click Me</button>
    <br>
    <hr>
    Words:<br>
    <input type= "text" id= "randomNumber">
</form>

<script>
        function myFunction(){
            var randomWords = ['Alpha','Beta','Gamma','Epsilon','Kappa','Omega'];
            var callNumber = Math.floor(Math.random()*6);
            var randomWord = randomWords[callNumber]
            document.getElementById('randomNumber').value=randomWord

}

</script>

</body>
</html>

'If you can then please remove the input box and print the words separetely' the result blinks in the box and then dissappears.

button is a submit button by default and submit buttons submit so the form is submitting.... — epascarello, May 17 '18 at 18:04
Can you please elaborate and if possible tell me the correction — Nakshatra Aich, May 17 '18 at 18:07

score 0 · Answer 1 · answered May 17 '18 at 18:13

The <button> is submitting the form. Move the button outside the form, prevent the form from submitting, use a different trigger element than <button>, etc. The issue is that the form is submitted (i.e. the page is reloaded) as soon as the button is clicked and the function is ran.

function myFunction(e){
  var randomWords = ['Alpha','Beta','Gamma','Epsilon','Kappa','Omega'];
  var callNumber = Math.floor(Math.random()*6);
  var randomWord = randomWords[callNumber]
  document.getElementById('randomNumber').value=randomWord
}

<button onclick="myFunction()"> Click Me</button>
<form>
    <br>
    <hr>
    Words:<br>
    <input type= "text" id= "randomNumber">
</form>

Please find the error in here. After clicking the button the words appears and dissappears in the box

1 Answers1