如何在JavaScript中調用onclick事件？我不想在我的HTML頁面中使用任何事件

如何在Javascript中調用「onclick」事件？我不想在我的HTML頁面中使用任何事件。下面的代碼不起作用。如何在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);

來源

2016-05-01 Bharath Venkatrajan

添加事件監聽器是正確的方式。您確定在DOM構建完成後添加它嗎？ – Rick

你說得對。我在DOM創建之前添加了它。謝謝:) –

你必須在body標籤結束使得DOM被加載並您的代碼工作，包括你的腳本。

來源

2016-05-01 10:48:16

感謝您的幫助，仍然無法正常工作：/當我在HTML中執行「onclick」時，它可以正常工作，但在執行addEventListener時不起作用。任何解決方案 –

您可以嘗試在身體標記結束之前包括腳本並檢查嗎？ –

是的，那是有效的。這只是我的要求說HTML文件中不應該有任何腳本。 –

您需要在移動功能之外定義框架功能。然後從移動功能調用幀功能。

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

來源

2016-05-01 10:53:40

試過了。仍然不起作用：/ –

1）添加其他元素

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

2）和CSS

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

3）現在，我更願意與setTimeout比setInterval工作因爲我發現它處理得更好，所以我稍微重寫了代碼。

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

來源

2016-05-01 11:16:13 Andy

如何在JavaScript中調用onclick事件？我不想在我的HTML頁面中使用任何事件

回答

相關問題