Part 2: User Input from mouse click to keyinput of "Enter/Return" key
We will use the file created in Part 1
- <html>
- <body>
- <input type="text" id="msg" ><br>
- <button onclick="displayMessage()">Click me</button>
- <p id="showinputhere"></p>
- <script>
- function displayMessage(){
- let themsg = document.getElementById("msg").value;
- document.getElementById("showinputhere").innerHTML = themsg;}
- </script>
- </body>
- </html>
We will now make a Key Listener for the "Enter/Return" key being substitued for the button click
Place this in the <script> section
We also need to edit the button in HTML to a paragraph without text
Change:
<button onclick="displayMessage()">Click me</button>
To this:
- click ctrl−s to save the file
- then → right−click ←in sublime and open in browser − you should now be able to type in text and have it output it just with "Enter/Return" key
Now Lets have a little fun with the program
Change:
<input type="text" id="msg" ><br>
document.getElementById("showinputhere").innerHTML = themsg;}
To this:
<p>Name:<input type="text" id="msg" ></p><br>
document.getElementById("showinputhere").innerHTML = (`Hello ${themsg} is not JavaScript DOM programming fun.`);}