javascriptでonclickイベントを呼び出すにはどうすればよいですか？ HTMLページでイベントを使用したくない場合

Question

Javascriptで「onclick」イベントを呼び出すにはどうすればよいですか？ HTMLページでイベントを使用したくない以下のコードは動作しません。

HTML：

<div id="myProgress"> 
     <div id="myBar"> 
     <div id="label">10%</div> 
     </div> 
    </div> 
    <button type="button" id="blah">Click Me</button> 

JS：

function move() { 
    var elem = document.getElementById("myBar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 

    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
     } else { 
      width++; 
      elem.style.width = width + '%'; 
      document.getElementById("label").innerHTML = width * 1 + '%'; 
     } 
    } 
} 


    document.getElementById("blah").addEventListener("click",move); 

Answer 1

あなたはDOMがロードされ、あなたのコードが動作するようにbodyタグの終わりにあなたのスクリプトを含める必要があります。

Answer 2

フレーム機能を移動機能の外に定義する必要があります。そして、move関数からフレーム関数を呼び出します。

JS：

var width = 10; 

function move() { 
var elem = document.getElementById("myBar"); 
var id = setInterval(frame(), 10); 


    } 

function frame() { 
    window.width++; 
    elem.style.width = window.width + '%'; 
    document.getElementById("label").innerHTML = window.width * 1 + '%'; 
} 


    document.getElementById("blah").addEventListener("click",move); 

Answer 3

1）他の要素

<div id="myBar"></div> 
<div id="label"></div> 

2）とCSS

#myBar { 
    background-color: blue; 
    height: 20px; 
    width: 0; 
} 

3の追加は）今、私はsetIntervalよりsetTimeoutで作業することを好みます私はそれがより良い扱いを見つけるように、私は少しコードを書き直しました。あなたはイベントリスナーを追加

var bar = document.getElementById("myBar"); 
var label = document.getElementById("label"); 
var button = document.getElementById("blah"); 

button.addEventListener("click", frame, false); 

var width = 0, timer; 

function frame() { 

    var loop = function (width) { 

    // if width isn't specified set it to 0 
    width = width || 0; 

    // clear the timer if width is max 
    if (width >= 100) { 
     clearTimeout(timer); 
    } else { 

     // otherwise set the bar width and label 
     var percent = width + '%'; 
     bar.style.width = percent; 
     label.textContent = percent; 

     // and call loop again, increasing the width by 1 
     timer = setTimeout(loop, 1000, ++width); 
    } 
    }; 

    // immediately call loop 
    loop(); 

} 

DEMO