We Keep Coding

Change the color of a div back and forth on click

I'm working on a homework assignment to change the color of this this div back and forth on click
<div id = "color-block">
<p id="center-text">The color is: <span id = "color-name">#F08080</span> </p>
</div>
So far I have this, which changes the color once, but then will not change it back to the original color
document.getElementById("color-block").onclick = function () {
changeColor();
};
function changeColor() {
if (
(document.getElementById("color-block").style.backgroundColor = "#f08080")
) {
document.getElementById("color-block").style.backgroundColor = "#008080";
} else {
document.getElementById("color-block").style.backgroundColor = "#f08080";
}
}
I'm unsure of what is causing the else statement to not work. Can anyone point me in the right direction?

For some reason (I'm not sure why) HEX colors (e.g. #ff0000) get converted to RGB colors (e.g. rgb(255,0,0)). It's therefore easier to just use RGB colors. There was also a fault in your if. You have to use a == for comparisons. You code ends up being like this:
document.getElementById("color-block").onclick = function () {
changeColor();
};
function changeColor() {
if (
(document.getElementById("color-block").style.backgroundColor == "rgb(240, 128, 128)")
) {
document.getElementById("color-block").style.backgroundColor = "rgb(0, 128, 128)";
} else {
document.getElementById("color-block").style.backgroundColor = "rgb(240, 128, 128)";
}
}
Demo: https://jsfiddle.net/d174aj95/

Trying to enlarge images on an HTML page

I'm new to coding and am trying to enlarge an image onclick and then un-enlarge an image onclick, using JavaScript. I've tried using jQuery but jQuery doesn't seem to work so I'm simply using JavaScript.
This is the JavaScript:
var myImg1 = document.getElementById('myImg1')
var myImg2 = document.getElementById('myImg2')
var myImg3 = document.getElementById('myImg3')
myImg1.onclick = function() {
if (myImg1.style.height = '100px') {
myImg1.style.height = '1000px'
return
} else {
myImg1.style.height = '100px'
return
}
}
The image has the class assigned 'i' in HTML and CSS, which sets the width as 100px.
The code does successfully enlarge the image to 1000px but it doesn't un-enlarge.
I've tried quite a few different methods, but mostly with jQuery and I can't get jQuery to work.

you need to use 2 equal signs to compare two things, one equal sign means you are trying to set a value for that variable.
if (myImg1.style.height == '100px') {
myImg1.style.height = '1000px'
// return
}
as Pato Salazar mentioned in the comments the return statement isn't needed.

JavaScript:
var myImg1 = document.getElementById('Img1');
myImg1.onclick = function() {
if (myImg1.style.height == '1000px') {
myImg1.style.height = '100px';
} else {
myImg1.style.height = '1000px';
}
}
OR
jQuery:
jQuery(document).ready(function() {
jQuery('#Img1').click(function() {
jQuery('#Img1').toggleClass('img1_1000px');
});
});
Both work. If you need jQuery, use to write < img src="Img1.jpg" id="Img1" style="height: 100px;" > and .img1_1000px { height: 1000px!important; } in style.
I hope I helped you.

Javascript: changing img src onclick only works once [duplicate]

This question already has answers here:
IF Statement Always True
(3 answers)
Closed 6 years ago.
This is so simple I'm not sure why I'm having trouble with it. I'm trying to imitate a flip card between two images so when clicked, it would simply change to the other image. I'm having trouble with my if/else statement because every time the image is clicked, it never makes it to the else part. In the source code of the HTML page, the src of the image is being changed but passes the if statement every time.
(function() {
// attaches event handler to image
window.onload = function() {
var image1 = document.getElementById("image1");
image1.onclick = changeImage;
};
// changes image when clicked to flip from image to text and text to image
function changeImage() {
if (document.getElementById("image1").src = "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}
})();

use == or === for comparison in if condition check.
using = will assign the value and always be true since the assigned string is not an empty string.
function changeImage() {
if (document.getElementById("image1").src == "img/top.png") {
document.getElementById("image1").src = "img/toptext.png";
//window.alert('hi');
}
else {
window.alert('it passed');
document.getElementById("image1").src="img/top.png";
}
}

You should use == for an if comparaison
if (document.getElementById("image1").src = "img/top.png") {
change into
if (document.getElementById("image1").src == "img/top.png") {

Windows 8 app dev JavaScript - Show/Hide Div in JavaScript Code

I'm trying to show or hide divs based on user settings in a Windows 8 app. I have 2 divs in my html file:
<div id="fillBlank"><p>Fill in the Blank area</p></div>
<div id="multipleChoice"><p>Multiple choice area</p></div>
In the JavaScript file I have:
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.visible = true;
fillBlank.visible = false;
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.visible = false;
fillBlank.visible = true;
}
}
This doesn't work. Any suggestions? Thanks in advance.

One way to do this in JavaScript is to use the style property:
var fillBlank = document.getElementById("fillBlank");
fillBlank.style.display = "none";
Setting style.display to "" will make it visible using what ever the display time the element currently has set.

You're very close!
var answerStyle = "mc";
function showArea() {
if (answerStyle == "mc") {
// Multiple choice
multipleChoice.style.visibility ='visible';
fillBlank.style.visibility = 'hidden';
} else if (answerStyle == "fb") {
// Fill in the blank
multipleChoice.style.visibility = 'hidden';
fillBlank.style.visibility = 'visible';
}
}

Animate a percentage positioned DIV in JavaScript

I decided to improve my JavaScript skills by practicing with some often used modules.
I am creating a fixed feedback button that comes up when you press it and goes down when you press again. Everything works, but I want it to be animated.
I used this code to get it done
function rollUp(item){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = "97%";
} else {
item.className="on";
document.getElementById("container").style.top = "78.5%";
}
}
Now I just don't get those percentages animated, I found many descriptions about animating divs by px, but I don't get this working.
So the div has to be moved from top position 97% to 78.5%
Any help?

Are you using jQuery? If yea, please try this:
function rollUp(item){
if(item.className == "on") {
item.className="off";
$("#container").animate({top: "97%"});
} else {
item.className="on";
$("#container").animate({top: "78.5%"});
}
}

You would need something like a timeout which will change the position in small steps which actually is "animation", here
function rollUp(){
var ph=document.getElementById("container").style.top.toString();
ph.replace("px","");
var phi=parseInt(ph);
if(phi<800){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = (phi+10).toString()+"px";
} else {
item.className="on";
document.getElementById("container").style.top = "600px";
}
Window.setTimeout(roolUp(), 300);
}
}