How to connect user input with a website using JavaScript
Basic File Set up
User Interaction
- Line 1: <html>
- Line 2: <head></head>
- Line 3: <body>
- Line 4: <input type="text" id="msg"><br>
- This code creates an input field and saves the input in variable "msg"
- Line 5: <button onclick="displayMessage()">Click Me</button>
- This code creates the bridge from HTML and the function "displayMessage()" by clicking a button
- Line 6: <p id="showinputhere"></p>
- This code displays the output from the called function "displayMessage()" where "msg" is set equal to "showinputhere"
- Line 7: <script>
- Line 8: function displayMessage() {
- Line 9: let themsg = document.getElementById("msg").value;
- This establishes the link from the input "msg" to a new variable "themsg" used in the function to link it back to HTML
- Line 10: document.getElementById("showinputhere").innerHTML = themsg;
- This code creates a variable to re-tranfer thru an id "showinputhere" to HTML the
- .innerHTML creates the string element to transfer back to HTML in the DOM Process
- .DOM Process − Direct Object Managment
- Line 11: </script>
- Line 12: </body>
- Line 13: </html>
This is the basic setup for communication between JavaScript and HTML in any wedsite