Jump to content

  • Log In with Google      Sign In   
  • Create Account


[HTML5] I suck at it please help with short code


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
6 replies to this topic

#1 Kripis   Members   -  Reputation: 132

Like
1Likes
Like

Posted 11 March 2013 - 02:43 PM

What is so wrong with it -.-
<!DOCTYPE html>

<html>
<head>
</head>
<body>
    
<script>
    function meatball(x)
    {
        alert("I love " + x)
    }
    h = document.getElementById("hi");
</script>

<form>
    <input type="text" id="hi">
    <input type="button" id="ho" onclick="meatball(h)">
</form>

</body>
</html>

 

 



Sponsor:

#2 Ectara   Crossbones+   -  Reputation: 2826

Like
0Likes
Like

Posted 11 March 2013 - 03:11 PM

Is it possible that it is failing to find the text input element from inside the script tags because you're referring to an element that hasn't yet been created? (It's defined later on)



#3 Damian.   Members   -  Reputation: 272

Like
0Likes
Like

Posted 11 March 2013 - 03:49 PM

Why don't you try something like this?

 

 

function meatball() {
  var h = document.getElementById('hi').value;
  alert("I love " + h);
}

Edited by Damian., 11 March 2013 - 03:53 PM.


#4 matrisking   Members   -  Reputation: 282

Like
0Likes
Like

Posted 11 March 2013 - 03:58 PM

What is so wrong with it -.-
<!DOCTYPE html>

<html>
<head>
</head>
<body>
    
<script>
    function meatball(x)
    {
        alert("I love " + x)
    }
    h = document.getElementById("hi");
</script>

<form>
    <input type="text" id="hi">
    <input type="button" id="ho" onclick="meatball(h)">
</form>

</body>
</html>

 

 

Try moving all of the javascript code (including the 'script') tags into the <head> section of the HTML.  When I run this on jsFiddle (jsFiddle.net) it runs fine for me.



#5 markr   Crossbones+   -  Reputation: 1653

Like
1Likes
Like

Posted 11 March 2013 - 04:25 PM

You can't refer to an element which doesn't exist yet.

 

Consider having all non-trivial init code (and certainly all DOM code) in a function which executes on page load.



#6 Kripis   Members   -  Reputation: 132

Like
0Likes
Like

Posted 11 March 2013 - 06:47 PM

Thanks everyone!



#7 Nercury   Crossbones+   -  Reputation: 766

Like
2Likes
Like

Posted 12 March 2013 - 08:00 AM

Analogical code implemented using jquery would look like this:
 
<!DOCTYPE html>

<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    
<script>
$(document).ready(function() { // this makes it execute only when DOM is loaded
    $("#ho").click(function() { // run this when element with id "ho" is clicked
        var $h = $("#hi"); // find element with id "hi"
        alert("I love " + $h.val());
    });
});
</script>

<form>
    <input type="text" id="hi">
    <input type="button" id="ho">
</form>

</body>
</html>
I am posting this as an example. Obviously, jQuery library takes some time to load, but it already solves many DOM manipulation tasks, and hides browser differences. The main advantage of jQuery is that your javascript is completely separate from HTML code.

Edited by Nercury, 12 March 2013 - 08:04 AM.





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS