Warum verschwindet mein Bild, das auf meiner Website angezeigt wird, nicht, wenn ich mit mehreren Funktionen, die ich geschrieben habe, auf eine Schaltfläche klicke?

In meinem Programm schrieb ich mehrere Funktionen, so dass, wenn Sie eine beliebige Anzahl von Tickethaltern und ergänzenden Pässen von 1 bis 550 eingegeben haben, und danach, wenn Sie auf den Button "Verfügbare Plätze berechnen" klickten: Anzahl der verfügbaren Plätze ist "und dann 555 minus die Anzahl der Karteninhaber und Zusatzkarten. Außerdem wollte ich das Bild des darunter liegenden Flugzeugs verschwinden lassen, sobald ich auf die Schaltfläche "Verfügbare Plätze berechnen" klicke. Als Ergebnis verwende ich jQuery (weil mein Lehrer mir wollte) das Bild verschwinden lassen, wenn ich auf diese Schaltfläche geklickt, was das ist: JedochWarum verschwindet mein Bild, das auf meiner Website angezeigt wird, nicht, wenn ich mit mehreren Funktionen, die ich geschrieben habe, auf eine Schaltfläche klicke?

$("#btnSubmit").click(function() { 
    $('#airbus').hide(); 
});

, wenn ich die Webseite geladen und getestet, die Das Bild würde nicht verschwinden, wenn ich auf die Schaltfläche "Verfügbare Plätze berechnen" geklickt habe. Was mache ich hier falsch?

Hier ist meine airbus.js Datei:

var name = "Michael Bao"; 
var copyrightdate = 2016; 

function copyright() { 
    console.log(name, copyrightdate); 
} 

var TicketHolders1 = document.getElementById("txtTickets"); 
var ComplementaryPasses1 = document.getElementById("txtPasses"); 

function number_of_available_seats(TicketHolders, ComplementaryPasses) { 
     var answer = 555 - (parseInt(TicketHolders) + parseInt(ComplementaryPasses)); 
     return("The number of available seats is " + answer); 
    } 

    function showresults(TicketHolders, ComplementaryPasses) { 
     document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses); 
    } 

    var button = document.getElementById("btnSubmit"); 

    function clickonbutton(){ 
    var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0; 
    var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0; 
    showresults(TicketHolders, ComplementaryPasses); 
    } 

    button.onclick = function() { 
    clickonbutton(); 
    }; 

    $("#btnSubmit").click(function() { 
     $('#airbus').hide(); 
    }); 


TicketHolders1.onblur = function() { 
    if (TicketHolders1.value == "") { 
     TicketHolders1.value = 0; 
    } 
}; 

ComplementaryPasses1.onblur = function() { 
    if (ComplementaryPasses1.value == "") { 
     ComplementaryPasses1.value = 0; 
    } 
};

Und hier ist meine airbus.html Datei:

<!DOCTYPE html> 
<!-- airbus.html --> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Airbus Seat Calculator</title> 
<style> 
DIV.movable { position:absolute;} 
</style> 

</head> 

<body> 

    <h2>Airbus Seat Calculator</h2> 

    <form id="formTest" method="get" action="processData"> 
    <table> 

    <tr> 
     <td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td> 
     <td><input type="text" id="txtTickets" name="tickets"></td> 
    </tr> 
    <tr> 
     <td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td> 
     <td><input type="text" id="txtPasses" name="passes"></td> 
    </tr> 


    <tr> 
     <td>&nbsp;</td> 
     <td> 
      <input type="button" value="Calculate Available Seats" id="btnSubmit"></td> 
    </tr> 
    </table> 
    </form> 
<img id="airbus" src="images/airbus.png" /> 

<div id="results"> 
</div> 
<h2>Michael Bao 
    2016</h2> 
<script src="airbus.js"> 


</script> 

</body> 
</html>

Quelle

2016-07-28 user_13439903

Sie haben nicht jquery.js auf Ihrer Seite enthalten. JQuery-Funktionen funktionieren nicht ohne ... – nnnnnn

Ihr Code lief in jsfiddle wie erwartet. Allerdings denke ich auch gleich wie @nnnnnn, dass du vielleicht verpasst hast, jquery library in dein Skript aufzunehmen. Überprüfen Sie, ob in der Konsole ein js-Fehler angezeigt wird, wenn Sie auf die Schaltfläche klicken. –

Soll ich dann eine neue .js-Datei erstellen und sie jquery.js nennen und den jquery-Code dort hineinlegen und diesen dann als Quelle in meine html-Datei legen? –

Sie benötigen

in Ihrem jquery Event-Listener definieren

$ (Dokument) .ready (Funktion() {

});

versuchen, den Code unten

$(document).ready(function() { 
    $("#btnSubmit").click(function() { 
     $('#airbus').hide(); 
    }); 
});

Quelle

2016-07-28 04:38:35

Das OP enthält den JS am Ende des Körpers, nach den fraglichen Elementen, so dass ein Document Ready Handler nicht notwendig ist. – nnnnnn

Hier gehen Sie. Benutzer .classList.toggle.

var pic = document.getElementsByTagName('img')[0]; 
 
var btn = document.getElementsByTagName('button')[0]; 
 

 
btn.addEventListener("click", function(){ 
 
    pic.classList.toggle('hide'); 
 
});

img{ 
 
    height: 48px; 
 
} 
 
.hide{ 
 
    display:none; 
 
}

<img src="http://simpleicon.com/wp-content/uploads/android.svg" alt="test"> 
 
<button>Test</button>

Quelle

2016-07-28 04:44:36

* Q. Warum funktioniert mein jQuery '.click()' und '.hide()' nicht? * A. Verwenden Sie stattdessen eine komplett andere non-jQuery-Methode. (Um ...) – nnnnnn

@nnnnnn jQuery ist JavaScript. Meine Antwort kann zusammen mit dem jQuery-Skript existieren. –

Die Frage besagt ausdrücklich, dass der OP von seinem Lehrer aufgefordert wurde, dies mit jQuery zu tun, und er fragt, warum sein jQuery-Code nicht funktioniert. (Natürlich macht es keinen Sinn, jQuery nur für diese eine Sache zu verwenden, wenn der Rest seines Skripts ohne sie auskommt, aber das ist hier immer noch die explizite Anforderung.) – nnnnnn

Warum verschwindet mein Bild, das auf meiner Website angezeigt wird, nicht, wenn ich mit mehreren Funktionen, die ich geschrieben habe, auf eine Schaltfläche klicke?

Antwort

Verwandte Themen