onKeyUp not working javascript

Question

I am trying to populate the div tag with what is typed in the name field (example below) using javascript. I am not sure what I am doing wrong but it is not working and I have at a loss as to why not? All I want is when the user types their first name it appears below. I have looked at other examples and still confused why this one will not work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> 
<html lang="en-GB"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>hello whirled</title> 
    <script type="text/javascript">
        document.getElementById("name").onkeyup = function() {
            document.getElementById("display").innerHTML = this.value;
        }
    </script> 
</head> 
<body> 
    <h1> 
        Bla Bla
    </h1> 
    <form method="get" action=" "> 
        <p> 
            Other Text goes here
        </p> 
        <p> 
            Type your first name here: 
            <input type="text" id="name" value="">
        </p> 
        <div id="display">'s ball is not in the ball park.</div> 
        <noscript>  
            <div> 
                If you can see this then SCRIPTS are turned OFF on your machine and it won't work 
            </div>   
        </noscript> 
    </form> 
</body>

score 9 · Accepted Answer · edited May 23 '17 at 11:45

9

You are referencing the element before it is rendered. It is like trying to eat a pizza before you make it.

You need to attach the event after the element is rendered. Either window.onload, document ready, or add the script after the element in the markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"> 
<html lang="en-GB"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>hello whirled</title>      
</head> 
<body> 
    <h1> 
        Bla Bla
    </h1> 
    <form method="get" action=" "> 
        <p> 
            Other Text goes here
        </p> 
        <p> 
            Type your first name here: 
            <input type="text" id="name" value="">
        </p> 
        <div id="display">'s ball is not in the ball park.</div> 
        <noscript>  
            <div> 
                If you can see this then SCRIPTS are turned OFF on your machine and it won't work 
            </div>   
        </noscript> 
    </form>
    <script type="text/javascript">
        document.getElementById("name").onkeyup = function() {
            document.getElementById("display").innerHTML = this.value;
        }
    </script> 
  </body>
</html>

edited May 23 '17 at 11:45

Community

1
1

answered Jun 12 '14 at 18:22

epascarello

185,306
18
175
214

2

Pizza example is always +1 – potashin Jun 12 '14 at 18:23
Ah I see, that explains it, so epascarello, if I place the JavaScript in a js file, will that work? From what I have read in tutorials most people say to place JavaScript in a seperate js file? I'm new to JS. So after the tag I can place **<script src="populatename.js" type="text/javascript"></script>** or will the same issue occure because it has rendered first? – Dino Jun 12 '14 at 18:39
Yes, putting it in a external JS file at the same location as you had it before will cause the same exact error. – epascarello Jun 12 '14 at 18:46
Thanks for that, is there another-way of doing this without having the code at the bottom of the PHP or HTML file but have it in a seperate JS file? – Dino Jun 12 '14 at 18:50
You can link to an external file at the bottom....There is no rules about it. – epascarello Jun 13 '14 at 04:29

onKeyUp not working javascript

1 Answers1