Ihr JS-Code keine Funktion haben myFunction
genannt, überprüfen Sie diese im Browser Entwickler-Tools-Konsole -
Uncaught ReferenceError: myFunction is not defined
dieses Snippet Versuchen -
$(document).ready(function(){
myFunction();
});
function myFunction() {
$("#button").click(function(){
$("#hcon").show();
console.log("clicked")
});
}
body {
background-color: lightblue;
}
#container
{
position: relative;
width: 900px;
height: 500px;
background-color: white;
margin: 0 auto;
margin-top: 50px;
border: 5px solid black;
box-shadow: -20px 30px grey ;
}
#taer {
}
#button {
display: inline-block;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 20px;
width: 120px;
background-color: darkgray;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
#button:hover{
background-color: cyan;
border-top: 1px solid black;
}
#hcon {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 200px;
background-color: black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="taer">
</div>
<div id="hcon">
</div>
<div id="button" onclick="myFunction()">Click!</div>
</div>
Beachten Sie auch, dass ich in der CSS visibility: hidden
zu display: none;
geändert habe.
Bitte beschreiben Sie sowohl das aktuelle als auch das erwartete Verhalten. –
Ersetze 'visibility: hidden;' mit 'display: none;' in CSS – Xaqron
Problem gelöst! Entschuldigung dafür, das erwartete Verhalten nicht erwähnt zu haben, sollte es eine Black Box mit der ID von #hcon enthalten haben, wenn auf die Schaltfläche geklickt wurde. :) –