2017-07-10 2 views
1

Ich lerne JavaScript und CSS und machte ein Testprojekt in Visual Studio 2015 Community Edition. Das Problem, das ich habe, ist die Funktion ChangeTitleCSSStyle wird nicht aufgerufen, wenn Sie Visual Studio 2015 Community Edition verwenden. Im Online-Editor https://js.do/ und im Google Chrome-Browser funktioniert der Funktionsaufruf ordnungsgemäß. Mein Code:JavaScript-Funktion nicht aufgerufen OnClick-Taste in Visual Studio 2015 Community Edition

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

sind Sie ein Web-Formular Projekt in VS zu tun? – Necvetanov

Antwort

0

nicht sicher, warum es nicht funktioniert, wenn VS. mit Vielleicht werden Inline-Klick-Ereignisse aus irgendeinem Grund nicht unterstützt.

Vielleicht funktioniert es, wenn Sie versuchen, das Ereignis in Ihrem Skript selbst, wie Sie diese Einstellung:

<!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

Sie können versuchen,

<button onclick="changeTitleCSSStyle();">Change style</button> 
Verwandte Themen