jquery .one("click", function())
Question
I am trying to get the .one from jquery to only allow the color to be changed once even after clicking again, and i cant figure out why it wont work. This is my HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
<div id= "container">
<div class="grid">
<div id= "box1"></div>
</div>
</div>
</body>
</html>
This is my CSS code:
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
and finally, this is my JS:
function changeColor() {
var box = document.getElementById("box1");
$("box1").one("click", function() {
box.style = "background: " + genColor();
});
};
window.onload = changeColor
function genColor() {
var arr = ['blue', 'green', 'yellow', 'teal'];
var x = Math.floor(Math.random() * arr.length - 1);
return arr[x]
}
I am trying to get my changeColor function to work only once. and if i click it again nothing happens.
3 answers
solution1
2 ACCPTED 2019-12-10 05:51:04
.one should be .on then attach the event to the button on document ready so you could trigger the onclick multiple times.
$(document).ready(function() { var box = document.getElementById("box1"); $("#box1").on("click", function() { box.style = "background: " + genColor(); }); }); function genColor() { var arr = ['blue', 'green', 'yellow', 'teal']; var x = Math.floor(Math.random() * arr.length - 1); return arr[x] }
#box1 { width: 100px; height: 100px; right: 200px; background: red; position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="styleSheets/main.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="js/main.js"></script> </head> <body> <div id="container"> <div class="grid"> <div id="box1"></div> </div> </div> </body>
solution2
1 2019-12-10 05:49:17
function changeColor() { $("#box1").one("click", function() { //box.style = "background: " + genColor(); $(this).css("background", genColor()); }); }; window.onload = changeColor function genColor() { var arr = ['blue', 'green', 'yellow', 'teal']; var x = Math.floor(Math.random() * arr.length - 1); return arr[x] }
#box1 { width: 100px; height: 100px; right: 200px; background: red; position: absolute; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id= "container"> <div class="grid"> <div id= "box1"></div> </div> </div>
solution3
1 2019-12-10 05:55:11
You have to do 2 changes in your code:
1: Change window.onload = changeColor this line to window.onload = changeColor();
(Here you have missed the function parentheses (); )
2: Change $("box1").one("click", function() this line to $("#box1").on("click", function()
( Here you have missed the jQuery id selector # and .on )
Working JSFiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.