2017-07-10 15 views
1

JavaScriptとCSSを学習し、Visual Studio 2015 Community Editionでテストプロジェクトを作成しました。私が持っている問題は、Visual Studio 2015 Community Editionを使用しているときにchangeTitleCSSStyle関数が呼び出されないということです。オンラインエディタhttps://js.do/とGoogle Chromeブラウザでは、関数呼び出しが正しく機能します。私のコード:Visual Studio 2015 Community EditionのonclickボタンでJavaScript関数が呼び出されない

index.htmを

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/default.css"> 
    <title>JavaScript and HTML</title> 
    <meta charset="utf-8" /> 
    <script> 
     function changeTitleCSSStyle() { 
      alert("Aanroep"); 
      var title = document.querySelector("#mainTitle"); 
      title.style.color = 'black'; 
      title.style.backgroundColor = "yellow"; 
      title.style.border = "5px dashed red"; 
     } 
    </script> 
</head> 
<body> 
    <h1 id="mainTitle">My home page</h1> 
    <p>This is an example of interactivity between JavaScript and the HTML content of a document.</p> 
    <button onclick="javascript: changeTitleCSSStyle();">Change style</button> 
</body> 
</html> 

default.css

h1 { 
    color: red; 
    background-color: lightGreen; 
    border: 12px solid violet; 
    padding: 5px; 
    border-radius: 15px; 
    text-align: center; 
} 

p, h1 { 
    font-family: cursive; 
} 

p, img, button { 
    margin-left: 50px; 
} 
+0

あなたはVSでWebフォームプロジェクトをやっていますか? – Necvetanov

答えて

0

わからないを試すことができますインラインクリックイベントは何らかの理由でサポートされていない可能性があります。あなたはこのようなあなたのスクリプト自体にイベントを設定しようとした場合

おそらくそれは動作します:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>JavaScript and HTML</title> 
<meta charset="utf-8" /> 
<script> 
    function changeTitleCSSStyle() { 
     alert("Aanroep"); 
     var title = document.querySelector("#mainTitle"); 
     title.style.color = 'black'; 
     title.style.backgroundColor = "yellow"; 
     title.style.border = "5px dashed red"; 
    } 

    document.addEventListener("DOMContentLoaded", function(event) { 
     var button = document.getElementById('change_style_button') 
     button.addEventListener('click', function(){ 
      changeTitleCSSStyle() 
     }); 
    }); 

</script> 
</head> 
<body> 
    <h1 id="mainTitle">My home page</h1> 
    <p>This is an example of interactivity between JavaScript and the HTML content of a document.</p> 
    <button id="change_style_button">Change style</button> 
</body> 
</html> 
0

VS.を使用している場合、それは動作しませんなぜあなたは

<button onclick="changeTitleCSSStyle();">Change style</button> 
関連する問題