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

** 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ファイルを最初にダウンロードし、DOMをビルドするため、HTML要素がロードされた後にコードが実行されます。完了後、ボタンを見つけてそのボタンにリスナーを追加することができます。

2.2他の人が言ったように、すべてのHTML要素の後に、</body>タグの前にJavaScriptを読み込みます。すべての要素がロードされた後に実行されるので、これも機能します。しかし、一般的には、ウィンドウロードリスナーを追加したくないため、JSファイルをコンテンツの後ろにロードして、より良いプリフォーダンスにします。
200％が機能しない可能性があります。あなたは箱の高さを倍にしたいと思いますよね？指定されたパーセントで高さを設定することは、それをスケーリングすることと同じではありません。％のサイズは魔法のようなもので、親要素に関連しています。あなたの場合はあなたを除いて動作しません。あなたは後に** JSをロードする必要が
```
var box = document.getElementById("box"); 
box.style.height = (parseInt(box.style.height) * 2) + "px"; 
```

出典

2017-01-14 20:23:08 klenium

JavascriptをHTMLにリンクする

答えて

関連する問題