Javascript Style Button funktioniert nicht

Ich kann mein Javascript nicht ausführen. Ich habe mehrere verschiedene Optionen hinzugefügt und sie entfernt, ich hatte die Funktion in der und habe sie jetzt auf die verschoben. Egal was ich versuche, der Button funktioniert nicht. Ich versuche Javascript zu lernen. Es scheint nicht so schwierig zu lernen, aber wenn ich es nicht testen kann, was nützt es? Bitte helfen Sie!Javascript Style Button funktioniert nicht

<!DOCTYPE HTML>  
<html> 
    <head>  
     <meta charset=utf-8 />  
     <title>Change Paragraph Text</title>  

    </head>   
    <body>  
     <p id ="text">I’m going to change this text, I hope.</p>  

     <button type="button" onclick="js_style()">Click on Me</button>  

     <script> 
      function js_style() { 
       'use strict'; 

       //font styles added by JS: 
       document.getElementById("text").style.color="purple"; 
       document.getElementById("text").style.fontSize="18pt"; 
       document.getElementById("text").style.fontFamily="Comic Sans    MS"; 

       } 
       document.getElementById("text").innerHTML = js_style(); 
     </script> 

    </body>  
</html>

Quelle

2017-05-26 bbzzc

Willkommen zu Stack Overflow bbzzc! Hast du [deine Konsole überprüft?] (Http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log) Es kann dir helfen, Probleme in deinem Code zu finden. Es sieht auch so aus, als würdest du sofort 'js_style' aufrufen. –

-1

Können Sie versuchen:

<script type="text/javascript">

statt nur

<script>

Quelle

2017-05-26 18:35:27 Trent

Dies sollte ein Kommentar sein und es macht keinen Unterschied. Tatsächlich raten Leute oft * gegen * das Hinzufügen von 'type =" text/javascript "' –

Warum? In HTML5 lautet der Standardtyp "type" "text/javascript", und die meisten Browser haben es vor HTML5 jahrelang so verarbeitet. –

-1

versuchen mit onclick="js_style">:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset=utf-8 /> 
     <title>Change Paragraph Text</title> 

    </head> 
    <body> 
     <p id ="text">I’m going to change this text, I hope.</p> 

     <button type="button" onclick="js_style">Click on Me</button> 

     <script> 
      function js_style() { 
       'use strict'; 

       //font styles added by JS: 
       document.getElementById("text").style.color="purple"; 
       document.getElementById("text").style.fontSize="18pt"; 
       document.getElementById("text").style.fontFamily="Comic Sans MS"; 

       } 
       document.getElementById("text").innerHTML = js_style(); 
     </script> 

    </body> 
</html>

Quelle

2017-05-26 18:37:14 nicokant

Bitte testen Sie Ihren Code vor dem Posten. Dies hat den gleichen Effekt wie zuvor. –

Bitte geben Sie an, dass Sie die Änderungen in Ihrer Antwort –

oben auf der Antwort hinzugefügt haben, ich weiß nicht, wie Sie es in Code markieren – nicokant

Der Code, den Sie sich auf der Text, den Sie ändern möchten Würfen nicht definiert. Einfach

entfernen

document.getElementById("text").innerHTML = js_style();

und alles funktionieren sollte, nehme ich an. Hier ein Beispiel:

https://jsfiddle.net/nmLrpvhy/

Quelle

2017-05-26 18:40:08

Das Problem ist, dass Sie diese Zeile haben:

document.getElementById("text").innerHTML = js_style();

läuft automatisch (weil es außerhalb Ihrer Funktion ist) und das Ändern des Textes sofort, so auf die Schaltfläche klicken funktioniert, aber es werden nur dieselben Stile gesetzt, die bereits festgelegt wurden.

Darüber hinaus ist innerHTML für die Einstellung der "Inhalt" eines Elements, nicht seine Art. In Ihrem Fall versucht diese Zeile, den Rückgabewert der js_style-Funktion als Wert für innerHTML festzulegen. Die Funktion gibt jedoch keinen Wert zurück - sie betrifft nur das Ändern von Stilen.

Verwenden Sie keine Inline-HTML-Ereignisattribute (onclick usw.). Siehe here für warum. Machen Sie stattdessen Ihre ganze Arbeit in JavaScript.

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     <meta charset=utf-8 /> 
 
     <title>Change Paragraph Text</title> 
 

 
    </head> 
 
    <body> 
 
     <p id ="text">I’m going to change this text, I hope.</p> 
 

 
     <button type="button">Click on Me</button> 
 

 
     <script> 
 
      // get a reference to the button 
 
      var btn = document.querySelector("[type='button']"); 
 
      
 
      // set up the click event handler 
 
      btn.addEventListener("click", js_style); 
 
     
 
      function js_style() { 
 
       //font styles added by JS: 
 
       document.getElementById("text").style.color="purple"; 
 
       document.getElementById("text").style.fontSize="18pt"; 
 
       document.getElementById("text").style.fontFamily="Comic Sans    MS"; 
 
      } 
 

 
     </script> 
 

 
    </body> 
 
</html>

Quelle

2017-05-26 18:43:33

hier ist die Lösung Ihres Codes: die Zeile, in der Sie Ihre geänderten Text zu bekommen versuchten Funktion eigentlich nicht in den Anwendungsbereich der ‚js_style‘ war, warum nichts geschah wenn du auf den Knopf klickst.

<!DOCTYPE HTML> 
<html> 

<head> 
<meta charset=utf-8 /> 
<title>Change Paragraph Text</title> 

</head> 

<body> 
<p id="text">I’m going to change this text, I hope.</p> 

<button type="button" onclick="js_style()">Click on Me</button> 

<script> 
    function js_style() { 


     //font styles added by JS: 
     document.getElementById("text").style.color = "purple"; 
     document.getElementById("text").style.fontSize = "18pt"; 
     document.getElementById("text").style.fontFamily = "Comic Sans MS"; 
     document.getElementById("text").innerHTML = "Changed Text"; /* this 
     line should be here if you want to change the text of #text in you 
     html */ 
    } 
     /* you were written this line here which out of the scope of 
     function */ 
</script> 

</body> 

</html>

Quelle

2017-05-26 18:45:45

Sie sollten eine Erklärung des Problems und Ihrer Lösung. –

yo schreiben diese Zeile außerhalb der Funktion 'document.getElementById (" text "). InnerHTML =" Geänderter Text ";' –

Nein, in Ihrer Antwort. Sie sollten zurückgehen und Ihre Antwort bearbeiten, um das Problem und Ihre Lösung vollständig zu erklären. Außerdem erklärt Ihre Erklärung nicht wirklich, warum der Code nicht funktionierte, sondern nur, wo das Problem lag. Zuletzt haben Sie den OP-Code in etwas geändert, das er nie wirklich hatte. –

Javascript Style Button funktioniert nicht

Antwort

Verwandte Themen