將Javascript鏈接到HTML

我無法讓我的簡單JavaScript代碼運行，我在考慮代碼可能無法正確鏈接。你會友善地看一看嗎？下面是HTML代碼：將Javascript鏈接到HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jiggle Into JavaScript</title> 
    <script type="text/javascript" src="javascript.js"></script> 

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> --> 

</head> 
<body> 

    <p>Press the buttons to change the box!</p> 

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> 

    <button id="Button1">Grow</button> 
    <button id="Button2">Blue</button> 
    <button id="Button3">Fade</button> 
    <button id="Button4">Reset</button> 

</body> 
</html>

而這裏的JS代碼：

document.getElementById("Button1").addEventListener("click", function(){ 

    document.getElementById("box").style.height=200%; 

});

感謝您的幫助，您可以提供！

來源

2017-01-14 JTK0616

您需要加載JS ** **後用ID的元素'Button1' –

添加你的腳本，你的身體結束

<body> 
    ... 
    <script src="some.js"></script> 
</body>

200％應該是一個字符串（「200％」）

document.getElementById("box").style.height = "200%";

來源

2017-01-14 20:05:25 webdeb

試試這個：

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById("Button1").onclick = function(){ 
     document.getElementById("box").style.height='200px'; 
     //document.getElementById("box").style.height='200%'; 
    }; 
}, false);

我將您的代碼包裝在DOMContentLoaded中，所以代碼將在頁面（文檔）完全加載後生效。我也對你的點擊功能做了一些小的改動。

來源

2017-01-14 20:20:56

有3個問題：

在JavaScript中，沒有200%，JS比CSS不同。 JS使用整數和字符串。如果您想將元素的高度設置爲200％，你需要給它一個字符串類型：
```
document.getElementById("box").style.height="200%"; 
```
你的js文件加載和按鈕加載之前如此執行。因此document.getElementById("Button1")不會返回該元素，並且您無法將事件偵聽器綁定到該元素，因此當您單擊該按鈕時，沒有任何操作。您有兩種選擇：

2.1添加DOMContentLoaded listener to the window或使用jQuery's .ready()。如果你這樣做，你的代碼將在每個HTML元素被加載後執行，因爲瀏覽器首先下載HTML文件並構建DOM。完成後，你將能夠找到你的按鈕，並添加監聽器。

2.2正如其他人所說，在</body>標記之前的每個HTML元素之後加載您的JavaScript。由於它在每個元素被加載後執行，這也會起作用。但是，通常，我們在內容之後加載JS文件以獲得更好的優先，而不是因爲我們不想添加窗口加載偵聽器。
200％可能無法正常工作。我想你想把盒子的高度加倍，對吧？用給定的百分比設置高度並不等於縮放它。尺寸百分比是神奇的，它們與它們的父元素有關，在你的情況下它可能不像你所能工作的那樣。你應該試試這個：
```
var box = document.getElementById("box"); 
box.style.height = (parseInt(box.style.height) * 2) + "px"; 
```

來源

2017-01-14 20:23:08 klenium

將Javascript鏈接到HTML

回答

相關問題