Why doesn't this piece of code output anything?
Question
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript" >
var per1 = { name: "john", age: 23 };
var per2 = { name: "Robin", age: 10 };
var per3 = { name: "temp", age: 15 };
var people = new Array(3);
people[0] = per1;
people[1] = per2;
people[2] = per3;
function select()
{
document.write("test");
for(var i=0; i<people.length; i++)
{
if (people[i].age < 20)
document.write(people[i].name + "<br/>");
}
}
</script>
<header id="temp">temp</header>
<input type="button" value="touch me" onclick="select()" />
</body>
</html>
I'm totally new to javascript. This is the code I wrote. I couldn't find anything wrong with this piece of code. Can anyone help? Thank you. The problem is when I click the button, nothing happens.
1 answers
solution1
7 ACCPTED 2014-05-19 16:50:37
Why doesn't this piece of code output anything?
Because your function name conflicts with the select method of the window object, since global functions are thrown onto window . If you change your function name to something else ( foo , for instance), it'll work in that you'll get your page replaced with the word "test" (at least).
Here's a live copy of your code, which doesn't work, and here's a copy with the function name changed to foo , which does.
This is one of the many reasons to avoid using globals. In this case, for instance, you could give your button an id ( id="theButton" ) and no onclick , then use this minimally-modified script:
(function() {
var per1 = { name: "john", age: 23 };
var per2 = { name: "Robin", age: 10 };
var per3 = { name: "temp", age: 15 };
var people = new Array(3);
people[0] = per1;
people[1] = per2;
people[2] = per3;
document.getElementById("theButton").onclick = select;
function select()
{
document.write("test");
for(var i=0; i<people.length; i++)
{
if (people[i].age < 20)
document.write(people[i].name + "<br/>");
}
}
})();
That works because select is no longer global, and so no longer conflicts.
Just for what it's worth, here's a version that doesn't use document.write (best avoided), hooks up the handler with code, and uses array literal notation:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<header id="temp">temp</header>
<input type="button" value="touch me" id="theButton" />
<!-- Note that the script is *below* the content it uses -->
<script language="javascript" type="text/javascript" >
(function(){
var people = [
{ name: "john", age: 23 },
{ name: "Robin", age: 10 },
{ name: "temp", age: 15 }
];
document.getElementById("theButton").onclick = run;
function run()
{
display("test");
for(var i=0; i<people.length; i++)
{
if (people[i].age < 20)
{
display(people[i].name);
}
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.