Innerhtml JavaScript Not Working

Published: 26 Jan, 2024 Asked By 6 Answers Answered

  <body>
    <h1>Welcome, user.</h1>
    <input Id="user_input">
    <button onclick="myFunction()">SUBMIT</button>
    <h1 Id="message"></h1>

    <script>
        function myFunction(){
            let user_input = document.querySelector("#user_input");
            let message = document.querySelector("message");
            message.innerHTML = "welcome, user " + user_input.value;
        }
    </script>
   </body>

I have innerHTML javascript problem and is not working. Please help me to find it

html javascript innerhtml

6 Answers

Sadique Community Contributor Answered on 26 Jan, 2024

Go to the second line in Javascript Function.

let message = document.querySelector("message");

You are missing the # sign in selecting the message in the query selector

LAZIO LEO Community Contributor Answered on 01 Feb, 2024

The issue lies in the line where you're selecting the message element. You're missing the # symbol to indicate that you're selecting an element by its ID.

Sooraj Community Contributor Answered on 01 Feb, 2024

Here are some possible solutions:

Wait for the DOM to load: If you’re trying to update the innerHTML of an element before the element has been added to the DOM, it won’t work. You can either move your script tag down further or add your logic to a function which ought to be called when the document has been loaded. Here’s an example of how to do this:
window.onload = function () {
// Add your logic here
}
Check for typos: Make sure that you’re using the correct spelling of innerHTML. It’s case-sensitive and should be written in camelCase.
Use document.querySelector(): If document.getElementById() isn’t working, try using document.querySelector() instead. Here’s an example:
document.querySelector("#ma").innerHTML = "HELLO";
Use defer keyword: You can also use the defer keyword with a script to execute it after the DOM has been initialized. Here’s an example:
<script type=\"text/javascript\" defer>
// Your script here
</script>