从HTML调用JavaScript函数

Question

我无法理解此代码无法工作的原因。我不知道这里是调用一个函数的一些问题.... 请帮助纠正错误。

对不起，问这么简单的问题，但真的不明白为什么它不起作用。

function myFunction() { 
 
    var count=document.getElementById("picContainer").getElementsByTagName("img").length‌; 
 
    var temp=document.getElementById("pict_01").src; 
 
    var i; 
 
    for(i=1;i<=count;i++) { 
 
     if(i==count){ document.getElementById("pict_0"+i).src=temp; } document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src; 
 
            } } 
 

 
function generateArray() { 
 
    str = "["; 
 
    for(i=0; i<3; ++i) { 
 
    if (i>0) str += ", "; 
 
    str += -Math.random(); 
 
    } 
 
    str += "]"; 
 
    console.log(str); 
 
}

<div id="container"> 
 
    <div id="one"> 
 
     <button onclick="myFunction()"> Change an image order</button>   
 
     <input type="button" value="Generate in the console an array of negative numbers" id="cmdSwitch" onClick="generateArray();"/> 
 
     
 
     <h1 style="font-size:14">Header </h1> 
 
     
 
     <p style="font-size:10">Text </p> 
 
    
 
    
 
    </div> 
 
    
 
    <div id="picContainer"> 
 
     
 
     <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" /> 
 
     <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" /> 
 
     <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" /> 
 
     <img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" /> 
 
     
 
    </div> 
 
</div>

Answer 1

它的工作很好，但你在myFunction()拼错单词 “长度”。祝你好运！

function myFunction() { 
 
var count = document.getElementById("picContainer").getElementsByTagName("img").length 
 
var temp = document.getElementById("pict_01").src; 
 
     
 
    var i; 
 
    for(i=1;i<=count;i++) { 
 
     if(i==count){ document.getElementById("pict_0"+i).src=temp; } document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src; 
 
            } } 
 

 
function generateArray() { 
 
    str = "["; 
 
    for(i=0; i<3; ++i) { 
 
    if (i>0) str += ", "; 
 
    str += -Math.random(); 
 
    } 
 
    str += "]"; 
 
    console.log(str); 
 
}

<div id="container"> 
 
    <div id="one"> 
 
     <button onclick="myFunction()"> Change an image order</button>   
 
     <input type="button" value="Generate in the console an array of negative numbers" id="cmdSwitch" onClick="generateArray();"/> 
 
     
 
     <h1 style="font-size:14">Header </h1> 
 
     
 
     <p style="font-size:10">Text </p> 
 
    
 
    
 
    </div> 
 
    
 
    <div id="picContainer"> 
 
     
 
     <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" /> 
 
     <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" /> 
 
     <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" /> 
 
     <img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" /> 
 
     
 
    </div> 
 
</div>

Answer 2

你会发现这段代码更容易维护。 myFunction()重新排序DOM元素，而不是尝试换出src属性。 generateArray()创建本地javascript数组，而不是尝试手动创建序列化版本。

function myFunction() { 
 
    var container = document.getElementById("picContainer"); 
 
    var imgs = container.getElementsByTagName("img"); 
 
    container.appendChild(imgs[0]); 
 
} 
 

 
// this is just to make console.log() do something on SO 
 
console = { 
 
    "log": function(stuff){ 
 
    document.getElementById('debug').innerHTML = JSON.stringify(stuff); 
 
    } 
 
}; 
 

 
function generateArray() { 
 
    var r = [ 0 - Math.random(), -1 - Math.random(), -2 - Math.random() ]; 
 
    console.log(r); 
 
}

#picContainer img { 
 
    height: 100px; 
 
    border: 2px dotted gray; 
 
} 
 

 
#debug { 
 
    width: 100%; 
 
    height: 3em; 
 
    background-color: silver; 
 
}

<div id="one"> 
 
    <button onclick="myFunction()"> Change an image order</button>   
 
    <input type="button" value="Generate in the console an array of negative numbers" id="cmdSwitch" onclick="generateArray();"/> 
 
</div> 
 
    
 
<div id="picContainer">   
 
    <img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" /> 
 
    <img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" /> 
 
    <img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" /> 
 
    <img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" /> 
 
</div> 
 

 
<div id="debug">Debug Output</div>