I'm starting in JS and have been having trouble with a particular function I'm trying to write. The purpose is to have the text change once the button is pressed. The "nothing" text should change into "You say hi, I say Hey?" With the Hey? being text already on the document.
Here's the code, any pointers would be welcome!
<html>
<head>
<title>Javascript test </title>
</head>
<body>
<p id="hey">Hey?</p>
<p id ="nothing">Nothing</p>
<INPUT type =button VALUE="Button?" OnClick=(take())>
<script>
function take(){
var hey=document.getElementById("hey");
var nothing =document.getElementById("one");
nothing.appendChild(document.createTextNode("You say hi, I say " + hey));
}
</script>
</body>
</html>
Alright, thanks for all the help guys. No one in particular was 100% right but i tried a combination of all the suggestions and got about 99% of the way to where i wanted to go. My code looks like this now. The last change im trying to make is not to append new text strings but to replace the old string with the string that is currently being appended.
<html>
<head>
<title>Javascript test </title>
</head>
<body>
<p id="hey">Hey?</p>
<p id ="nothing">Nothing</p>
<input type ="button" value="Button?" OnClick="take();"/>
<script>
function take(){
var hey=document.getElementById("hey");
var nothing =document.getElementById("nothing");
nothing.appendChild(document.createTextNode("You say hi, I say " + hey.innerHTML));
}
</script>
</body>
</html>
I appreciate the help, thank you Stack Overflow community!
-
So you want to add "You Say Hi, I say hey" after nothing? Why do you get the "hey" element?bokonic– bokonic2012年07月10日 14:45:26 +00:00Commented Jul 10, 2012 at 14:45
-
1You might want to look into jQuery. It's easier to do things like this with it.woz– woz2012年07月10日 14:48:10 +00:00Commented Jul 10, 2012 at 14:48
-
@woz i would not consider this worthy of the overhead from jQuery, but that's just mejbabey– jbabey2012年07月10日 14:48:39 +00:00Commented Jul 10, 2012 at 14:48
-
I'd like the "nothing" text to turn into "You say hi, i say hey". I get the Hey element to get the text variable but im not sure how to put the variable into the line... nothing.appendChild(document.createTextNode("You say hi, I say Hey"));Kyle Smith– Kyle Smith2012年07月10日 14:49:00 +00:00Commented Jul 10, 2012 at 14:49
4 Answers 4
Your code has a few issues.
First, you should specify type="text/javascript" on your script tag.
Second, your input should look like this:
<input id="button" type="button" value="Button?" />
Third, you should bind your event handler in the script tag (See SoC):
document.getElementById('button').onclick = take;
Fourth, your function looks for an element with id one, which does not exist. Did you mean id nothing instead?
Fifth, assuming you use the correct id to get the nothing element, you need to use the value from the other p when setting the value.
var take = function () {
var hey = document.getElementById('hey');
var nothing = document.getElementById('nothing');
nothing.innerHTML= 'You say hi, I say ' + hey.innerHTML;
};
See a working example here: http://jsfiddle.net/M5UWn/
As a side note, I found jQFundamentals an excellent learning site for both jQuery and native javascript.
1 Comment
Change your input to this
<input type=button value="Button?" onclick="take();" />
Comments
<html>
<head>
<title>Javascript test </title>
</head>
<body>
<p id="hey">Hey?</p>
<p id ="nothing">Nothing</p>
<input type="button" value="Button?" onClick="take()"/>
<script>
function take(){
var hey=document.getElementById("hey");
var nothing =document.getElementById("nothing");
nothing.appendChild(document.createTextNode("You say hi, I say "+hey.value));
}
</script>
</body>
</html>
I have changed
the ending of input tag
added quotes to type of input and OnClick
you were doing document.getElementById("one") and there is no element with id one. So changed that to nothing
2 Comments
inputA couple of pointers here:
Change your button input html to look like this:
<INPUT type="button" VALUE="Button?" OnClick="take()">
Notice that all attributes are in double quotes. Also, the extra parentheses around the function call are removed.
When you get the 'nothing' element, you're using the wrong id. It should be like this:
var nothing = document.getElementById("nothing");
To change the text, it's simpler to just use this code:
nothing.innerText = "You say hi, I say " + hey.innerText;