Javascript mit HTML verknüpfen

Ich habe Probleme, meinen einfachen Javascript-Code zu erhalten, und ich denke, dass der Code möglicherweise nicht richtig verknüpft ist. Würdest du freundlich genug sein, einen Blick darauf zu werfen? Hier ist der HTML-Code:Javascript mit HTML verknüpfen

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

Und hier ist der JS-Code:

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

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

});

Vielen Dank für jede Hilfe, die Sie anbieten können!

Quelle

2017-01-14 JTK0616

Sie müssen die JS laden ** nach ** das Element mit der id 'Button1' –

Fügen Sie Ihren Skript bis zum Ende des Körpers

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

200% sollte eine Zeichenfolge sein ("200%")

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

Quelle

2017-01-14 20:05:25 webdeb

Try this:

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

Ich wickelte Ihren Code in DOMContentLoaded, so dass der Code funktioniert nach der Seite (Dokument) ist voll geladen. Ich habe auch ein paar kleine Änderungen an Ihrer Klick-Funktion vorgenommen.

Quelle

2017-01-14 20:20:56

Es gibt 3 Probleme:

In Javascript, gibt es keine 200% ist JS anders als CSS. JS verwendet Integer und Strings. Wenn Sie ein Element in der Höhe auf 200% einstellen möchten, müssen Sie es in einer Zeichenfolge eingeben:
```
document.getElementById("box").style.height="200%"; 
```
Ihre js Datei lädt und ausführt, um vor den Knopf Lasten. Daher gibt document.getElementById("Button1") das Element nicht zurück, und Sie können keinen Ereignis-Listener an es binden, so dass, wenn Sie auf die Schaltfläche klicken, nichts zu tun ist. Sie haben zwei Möglichkeiten:

2.1 Fügen Sie eine DOMContentLoaded listener to the window hinzu, oder verwenden Sie jQuery's .ready(). Wenn Sie dies tun, wird Ihr Code ausgeführt, nachdem alle HTML-Elemente geladen wurden, da der Browser zuerst die HTML-Datei herunterlädt und das DOM aufbaut. Nachdem Sie fertig sind, können Sie Ihren Button finden und Hörer hinzufügen.

2.2 Wie andere sagten, laden Sie Ihr Javascript nach jedem HTML-Element, vor dem -Tag. Da es ausgeführt wird, nachdem jedes Element geladen wurde, wird dies auch funktionieren. Im Allgemeinen laden wir JS-Dateien nach dem Inhalt für eine bessere Vorausetzung und nicht, weil wir keinen Fensterlade-Listener hinzufügen möchten.
Die 200% funktioniert möglicherweise nicht. Ich schätze du willst die Höhe der Box verdoppeln, oder? Das Festlegen der Höhe mit einem bestimmten Prozentwert entspricht nicht der Skalierung. Größen in Prozent sind magisch, sie beziehen sich auf ihr Elternelement, das in Ihrem Fall möglicherweise nicht so funktioniert wie Sie. Sie sollten dies versuchen:
```
var box = document.getElementById("box"); 
box.style.height = (parseInt(box.style.height) * 2) + "px"; 
```

Quelle

2017-01-14 20:23:08 klenium

Javascript mit HTML verknüpfen

Antwort

Verwandte Themen