Develop Reference

JavaScript / JQuery button function not working properly

I'm building a website that allows a user to select one of the character. When the user clicks on 'Confirm', I want the page to be routed by showing the selected image and option to go back and select other characters. I want it to be shown as follows
But for some reason, the code shows up like this:
I don't see the 'Other' button, but it only comes out with a Confirm button. Not sure how to fix it..
Here is the code:
var elementSelected = null;
var typeSelected = false;
$(document).on('click', '.image > img', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
elementSelected = $(this);
typeSelected = false;
});
$(document).on('input', '#text-src', function() {
$('.image > img').each(function() {
$(this).removeClass('active');
})
elementSelected = $(this);
typeSelected = true;
})
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
})
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
#dog {
width: 70%;
height: 70%;
}
#mother {
width: 70%;
height: 70%;
}
#soldier {
width: 70%;
height: 70%;
margin-top: 50%
}
#teacher {
width: 70%;
height: 70%;
margin-top: 50%;
}
.button {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 60%;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #242424;
}
.button:active {
background-color: #121212;
}
.button>span {
color: #eeeeee
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="./images/Hamburger_icon.svg" alt="Hamburger Menu" />
</a>
<a href="styles/Jason/settings.html">
<ul class="navbar-nav">
<img src="./images/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="50vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<img src="images/dog.png" id="dog" alt="dog">
<img src="images/mother.png" id="mother" alt="mother">
<img src="images/military.png" id="soldier" alt="soldier">
<img src="images/teacher.png" id="teacher" alt="teacher">
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="50vh" />
</div>
<div class="bot-nav-img">
<img src="./images/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="50vh" />
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="./images/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="50vh" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="./styles/Jason/coach_selection.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->

I am not a html/css expert, however I can see in chrome dev tools that the 'Other' button is certainly there (and the script is working as expected) however it is hidden behind the fixed footer. A quick google on 'bootstrap fixed footer body' found this answer -
Flushing footer to bottom of the page, twitter bootstrap
and I indeed got your snippet working (i.e. the 'Other' button showing) by adding the following styles to your css -
body {
padding-bottom:150px;
}
fixed-bottom {
margin-top:-150px;
}
with regards to the confirm button still showing, you can modify the script as following to show/hide the confirm button accordingly -
$(document).on('click', '#button-confirm', function() {
$('.image').hide();
$('#button-confirm').hide();
if (typeSelected == true) {
$('.view-image > img').attr('src', elementSelected.val());
} else {
$('.view-image > img').attr('src', elementSelected.attr('src'));
}
$('.view-image').fadeIn('high');
})
$(document).on('click', '#button-other', function() {
$('.view-image').hide();
$('.image').fadeIn('high');
$('#button-confirm').show();
})

Functionality like tabs but scenario with appending to another div

$('.day-col-content').each(function() {
$(this).on('click', function() {
$('.day-col').removeClass('selected')
$(this).parent().addClass('selected');
$(this).clone().appendTo('.selected-day');
$('.selected-day .day-col-content').addClass('selected');
});
});
.actual-weather {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.selected-day .selected-day {
float: left;
width: 100%;
}
.selected-day .day-col-content {
display: none;
}
.selected-day .day-col-content.selected {
display: block
}
.days-box {
float: left;
width: 100%;
display: flex;
justify-content: center;
}
.day-col {
float: left;
width: 130px;
height: 130px;
position: relative;
margin: 0 10px 10px;
text-align: center;
cursor: pointer;
background:red;
}
.day-col.selected {
background:blue;
}
.day-col .day-col-content {
width: 100%;
position: absolute;
margin: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
<span class="selected-day"></span>
</div>
<div class="days-box">
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div>
I have scenario where I want to click on specific div and then this div append to another div ( selected day)
and then I want to switch between appended divs for showing selected div (day) (for functionality like tabs).
Problem is that all div are showing and I don't know how to manage thoose selected divs
Does somebody know how to achieve this?

You need to empty the div first then append the DATA or use .html() directly and it will overrite the data:
$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );
NOTE: You don't have to loop using .each() to attach the click event to all the divs just use the selector directly like :
$('.day-col-content').on('click', function() {
...
});
SAMPLE
$('.day-col-content').on('click', function() {
$('.day-col').removeClass('selected');
$(this).parent().addClass('selected');
$('.selected-day').html($(this).clone());
});
.selected-day {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 3
</p>
</div>
<hr>
<div class="selected-day"></div>

Hi I'm not sure about your styling but this would work as a custom tab version
$(document).on('click','.day-col-content',function(){
$('.day-col').removeClass('selected')
$(this).parent('.day-col').addClass('selected');
$('.selected-day').html($(this).clone());
$('.selected-day .day-col-content').addClass('selected');
});
.day-col.selected {
color:green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div class="selected-day"></div>

Use jQuery or JS to hide div on different dropdown selection

When I select an option from the dropdown, a set of buttons associated with that selection appears in a div (where it should). I then click one of those buttons which causes a second div to appear (#info, green background) and content associated with the button to appear inside of the div (as intended).
My issue is this:
Once the second div has appeared, if I go back to the initial dropdown and select a different option, I want the green #info div to disappear, where it currently stays visible and contains the content associated with the last button clicked despite having selected a different dropdown option.
I would SO appreciate any help anyone can provide! Thanks so much for taking a look. So grateful to have access to all of your smart brainz.
Here is my Fiddle
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "red") {
$(".box").not(".red").hide();
$(".red").show();
} else if ($(this).attr("value") == "green") {
$(".box").not(".green").hide();
$(".green").show();
} else if ($(this).attr("value") == "blue") {
$(".box").not(".blue").hide();
$(".blue").show();
} else {
$(".box").hide();
}
});
}).change();
$('.buttons button').click(function() {
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
});
.box {
padding: 20px;
margin-top: 20px;
border: 1px solid #000;
width: 200px;
height: 250px;
padding: 0px;
display: inline-block;
float: left;
}
#button-column {
text-align: center;
padding: 0px;
}
button {
font-size: 12px;
width: 100px;
height: 30px;
padding: 10px;
margin: 15px;
}
#info {
width: 250px;
height: 200px;
float: left;
display: inline-block;
text-align: center;
margin-left: 15px;
margin-top: 30px;
}
#dropdown {
width: 200px;
text-align: center;
}
.box h3 {
text-align: center;
}
.info {
background-color: green;
height: 200px;
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown">
<h3>I am a...</h3>
<select>
<option>Select</option>
<option value="green">Dinosaur</option>
<option value="red">Unicorn</option>
</select>
</div>
<div class="green box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="content">Content</button>
</li>
<li class="buttons">
<button data-link="mad">Mad</button>
</li>
<li class="buttons">
<button data-link="hungry">Hungry</button>
</li>
</ul>
</div>
<div class="red box">
<h3>Today I am feeling...</h3>
<ul id="button-column" style="list-style: none;">
<li class="buttons">
<button data-link="shy">Shy</button>
</li>
<li class="buttons">
<button data-link="curious">Curious</button>
</li>
<li class="buttons">
<button data-link="sleepy">Sleepy</button>
</li>
</ul>
</div>
<div id="info">
</div>
<div id="hiddenDivs" style="display:none;">
<!-- Dinosaur Select -->
<div id="content">
<div class="info">
<h3>Laying in the sun is nice.</h3>
</div>
</div>
<div id="mad">
<div class="info">
<h3>Go knock some trees over!</h3>
</div>
</div>
<div id="hungry">
<div class="info">
<h3>Go make a salad!</h3>
</div>
</div>
<!-- Unicorn Select -->
<div id="shy">
<div class="info">
<h3>I like to hide in the forest.</h3>
</div>
</div>
<div id="curious">
<div class="info">
<h3>Wait until everyone is asleep.</h3>
</div>
</div>
<div id="sleepy">
<div class="info">
<h3>Napping under a shady tree is the best.</h3>
</div>
</div>

Here's an updated Fiddle.
You just need to hide and show the #info div on change or load.
So anytime the dropdown changes, that #info div will hide. And then, if someone clicks a button, it will show. That show() function will always run, but will be ignored if you're clicking on the button multiple times.
});
$("#info").hide(); // Hide
}).change();
$('.buttons button').click(function (){
$("#info").show(); // Show
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});

JS: Iterate through divs

I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.

If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>

Javascript: Image button

I have a javascript Quiz and I would like to make an image appear when the user clicks a button. For example: when they click the correct answer a green thubs up appears. here is my code at the moment:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Task 1</title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-style: solid;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 55px;
text-decoration: none;
}
li a:hover {
background-color: #111;
border-style: solid;
}
.tasks {
color: black;
font-size: 250%;
text-align: center;
}
.t&f {
color: white;
font-size: 250%;
text-align: center;
border-style: solid;
}
</style>
</head>
<body>
<ul>
<li>
Home
</li>
<li>
Task 1
</li>
<li>
Task 2
</li>
<li>
Task 3
</li>
<li>
Task 4
</li>
<li>
Task 5
</li>
<li>
Task 6
</li>
<li>
Task 7
</li>
</ul>
<script src="script-1.js" type="text/javascript">
</script>
<script>
</script>
<div class='tasks'>
<div class='container'>
<h1>Task 1</h1>
</div>
</div>
<div class='tasks'>
<div class='container'>
<h3>True or False Quiz</h3>
<h5>Question One</h5>
<h6>1) Michael Jackson’s Thriller is the greatest-selling album of
all time.</h6>
<button onclick="document.bgColor='Green'; alert('Correct! Good job :)')">True</button>
<button onclick="document.bgColor='Red'; alert('Wrong! Unlucky. Try again :(')">False</button>
</div>
</div>
<div class='tasks'>
<div class='container'>
<h5>Question Two</h5>
<h6>2) The modern Caesar salad is derived from a recipe dating back
to ancient Rome.</h6>
<button onclick="document.bgColor='Red';alert('Wrong! Unlucky. Try again :(')">True</button>
<button onclick="document.bgColor='#00cc00'; alert('Correct! Good job :)')">False</button>
</div>
</div>
<div class='tasks'>
<div class='container'>
<h5>Question Three</h5>
<h6>3) Ozone is "good" in the upper atmosphere but "bad" in the
lower.</h6>
<button onclick="document.bgColor='Green'; alert('Correct! Good job :)')">True</button>
<button onclick="document.bgColor='#ff3300'; alert('Wrong! Unlucky. Try again :(')">
False</button>
</div>
</div>
</body>
</html>
Many Thanks
James

You can try with javascript
<button id="mybutton" onclick="showButton()">Show Image </button>
function showButton(){
image = document.getElementById('nameOfImageHere');
image.style.display = "block";
}

Here we go:
1 Method:
You may use jQuery Hide(), Show() function :
<script>
$(document).ready(function(){
$("#buttonIdShow").click(function(){
$("#Image").hide();
});
$("#buttonIdHide").click(function(){
$("#Image").show();
});
});
</script>
<img id="Image"/> <!-Here is your image-->
<button type="button" id="buttonIdShow">Show</button> <!--Show button-->
<button type="button" id="buttonIdHide">Hide</button> <!--Hide button-->
2 Method: jQuery Animate CSS display:
<script>
$("#yourButton1Id").click(function(){
$("#ImageId").css("display","block");
});
$("#yourButton2Id").click(function(){
$("#ImageId").css("display","none");
});
</script>
Hope it helps;)