从HTML调用JavaScript函数

Question

我无法理解为什么这段代码不起作用。我希望这里有一些调用函数的问题.... 请帮助纠正错误。

很抱歉提出这么简单的问题，但实在无法理解为什么它不起作用。

＆＃13;

＆＃13;

 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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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数组，而不是尝试手动创建序列化版本。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;