I'm trying to get the submit button to open a specific url based on the box that is selected. I'm currently not getting either an alert or a new window with the url. I used some jQuery to toggle a class to show that the box is selected and put that in a function, then I created an if else statement inside of another function that I called inside of the tag for the submit button. Here is the code
<body>
<div class="blue">
This is a clickable box
</div>
<div class="green">
This is a clickable box
</div>
<input type="submit" value="Submit" onclick="returnUrl()">
<style>
.blue {
width: 200px;
height: 100px;
background-color: blue;
color: white;
padding: 25px;
box-sizing: border-box;
cursor: pointer;
transition: all .25s ease-in-out;
}
.green {
width: 200px;
height: 100px;
background-color: green;
color: white;
padding: 25px;
box-sizing: border-box;
cursor: pointer;
transition: all .25s ease-in-out;
}
.red {
background-color: blue;
border: 2px solid red;
}
.red2 {
background-color: green;
border: 2px solid red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function buttonClicked() {
$(".blue").click(function(){
$(this).toggleClass("red");
});
}
return buttonClicked();
});
$(document).ready(function() {
function greenButtonClicked() {
$(".green").click(function(){
$(this).toggleClass("red2");
});
}
return greenButtonClicked();
});
function returnUrl() {
var greenButton = greenButtonClicked();
var blueButton = buttonClicked();
if( greenButton == true) {
window.open("https://www.google.com");
alert("button clicked!!")
} else {
window.open("https://www.gmail.com");
alert("other clicked!!")
}
}
</script>
</body>
Aucun commentaire:
Enregistrer un commentaire