Simple HTML5 code to change the innerHTML according to user input

Posted by on
This is a simple HTML5 code that you can change the innerHTML according to the given input!

First html file should be made like this


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5</title>
    </head>
    <body>
        <div id="soundsLike"></div>
        <script src="scripts/script.js"></script>
    </body>
</html>


And this is the JavaScript file that will do the changes according to the given input


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var walksLike = "duck";
var soundsLike = document.getElementById("soundsLike");
if(walksLike == "dog"){
    soundsLike.innerHTML = "woof!woof!!";
} 
else if (walksLike == "duck"){
    soundsLike.innerHTML = "Quack!Quack!!";
}
else {
    soundsLike.innerHTML = "crickets...";
}

Comments

Post a Comment