Help! basic JS function problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
axlemax
Forum Newbie
Posts: 5
Joined: Mon Dec 12, 2011 5:29 pm
Location: Sydney, Australia

Help! basic JS function problem

Post by axlemax »

In the following code I have a script and then I want to run the same script as a function that is called by pressing the button. But the function doesn't work. Can you help me to understand why please?

<!DOCTYPE html>
<html>

<head><title></title></head>

<body>

<img src="klematis.jpg" width="150" height="113" />
<img src="klematis2.jpg" width="152" height="128" />


<script type="text/javascript">
function show_images(){
var imgs = document.getElementsByTagName('img');

if(imgs.length > 0){
for(var i=0; i<imgs.length; i++){
document.write("The source of image object ",(i+1));
document.write('<br />');
document.write(imgs.src);
document.write('<br />');
}
}
}
</script>

<script type="text/javascript">

var imgs = document.getElementsByTagName('img');

if(imgs.length > 0){
for(var i=0; i<imgs.length; i++){
document.write("The source of image object ",(i+1));
document.write('<br />');
document.write(imgs.src);
document.write('<br />');
}
}

</script>


<input type="button" onclick="show_images()" value="Show images" />


</body>
</html>
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Help! basic JS function problem

Post by McInfo »

The code outside the function runs while the document is loading. That is, it runs after the document has been opened but before "</html>" has been written. You could call the show_images() function in place of that code and notice no difference in the output.

The problem with calling the function via a button is that the function then runs after the document has been closed. Calling document.write() at that point implicitly calls document.open() to reopen and clear the document.

An alternative approach is to modify the innerHTML of an existing element, or use document.createTextNode() and document.body.appendChild().
axlemax
Forum Newbie
Posts: 5
Joined: Mon Dec 12, 2011 5:29 pm
Location: Sydney, Australia

Re: Help! basic JS function problem

Post by axlemax »

OK. So I am trying to follow your advice and learn how to use createTextNode and appendChild
(Firefox with JS enabled).
Why isn't this working please?

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">

function editNodeText(id, newText)
{
var node = document.getElementById(id);

while (node.firstChild)
node.removeChild(node.firstChild);

node.appendChild(document.createTextNode(newText));
}

</script>
</head>
<body>

<span id=”spanEx” onclick="editNodeText('spanEx','New text is here')">Change this text</span>

</body>

</html>
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Help! basic JS function problem

Post by McInfo »

Be careful with the quote characters.

Code: Select all

<span id=”spanEx”
<span id="spanEx"
Post Reply