I posted a question a week ago about how to use JavaScript switch statement to compare this.id. I found it hard to get my function/object methods out of the switch as variables. Using strict mode and trying to do this seems impossible. However I did find one way to get the results I wanted.
"use strict"
function fragmentLoader() {
getID(this.id);
}
function getID(x) {
var theID = x;
switch (theID) {
case "myFirstID":
myDate();
break;
case "mySecondID":
changeStyle();
break;
case "myThirdID":
myText();
break;
default:
otpt = "ERROR!";
}
}
function myDate() {
document.getElementById('content').innerHTML = Date();
}
function changeStyle() {
var whatColor = document.getElementById("content").style.color;
if ( whatColor === "black") {
document.getElementById("content").style.color = "blue";
} else {
document.getElementById("content").style.color = "black";
}
}
function myText() {
document.getElementById('content').innerHTML = "This Text will display";
}
document.getElementById("content").style.color = "black";
document.querySelector('#myFirstID').addEventListener('click', fragmentLoader);
document.querySelector('#mySecondID').addEventListener('click', fragmentLoader);
document.querySelector('#myThirdID').addEventListener('click', fragmentLoader);
<div>
<div>
<button id="myFirstID">
Press for Date and Time.
</button>
</div>
<div>
<button id="mySecondID">
Press to change style color.
</button>
</div>
<div>
<button id="myThirdID">
Press for Text.
</button>
</div>
<p id="content">content here
</p>
</div>
Had to laugh at my example because for some odd reason it takes 2 clicks to get the style to change. Any ideas as to why? NOTE : " This is now FIXED"
Other than that I hope this helps someone else.
-Rob
This line is the reason your code does not work as expected:
document.getElementById("content").style.color === "black";
You're trying to initially set the color to black, but you used to many "=" signs. Change that line to:
document.getElementById("content").style.color = "black";
... and your code will work!
Related
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/
I am getting back into learning Javascript and am running into trouble with changing text color when clicking a button.
A lot of the other questions have referenced changing the color of the button itself, and the code I have does not seem to have an error.
<body>
<h1>My First Web Page</h1>
<p>Exciting stuff! This is my first web page.</p>
<button id= “color”>Change color!</button>
<script>
document.getElementById('color').onclick = changeColor; var currentColor = “red”;
function changeColor() {
if(currentColor == “red”){
document.body.style.color = “green”;
currentColor = “green”;
} else {
document.body.style.color = “red”;
currentColor = “red”;
}
return currentColor;
}
</script>
</body>
However, the line
document.getElementById('color').onclick = changeColor; var currentColor = “red”;
generates an error saying that it is an illegal token. Initially, I thought the issue had to do with not putting the code in a form. The instructional video's demonstration seemed to work fine, but I keep getting this error. Can anyone provide an idea what is going wrong?
Your code works perfectly but you use incorrect syntax. Change “ to "
quotation marks.
Also, you do not need to use return statement inside the function, which represents onclick event handler.
<body>
<h1>My First Web Page</h1>
<p>Exciting stuff! This is my first web page.</p>
<button id= "color">Change color!</button>
<script>
document.getElementById('color').onclick = changeColor;
var currentColor = "red";
function changeColor() {
if(currentColor == "red"){
document.body.style.color = "green";
currentColor = "green";
} else {
document.body.style.color = "red";
currentColor = "red";
}
}
</script>
</body>
I'm hopelessly lost on this one.
Html:
<p onclick="on("test", testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>
Js:
var testSwitch = 0;
function on(element, machineSwitch){
if (machineSwitch==0){
document.getElementById(element).style.display="green";
document.getElementById(element).innerHTML="STATUS:ON";
machineSwitch=1;
}
else if(machineSwitch==1){
document.getElementById(element).style.display="red";
document.getElementById(element).innerHTML="STATUS: OFF";
machineSwitch=0;
}
}
I'm trying to make it so that the background changes to green when its clicked then red when its clicked again. The background should cycle through these. I also need a variable to control it because I am using it to control a whether a loop happens or not elsewhere.
Use element.style.background to change the BG Color.
HTML
<p onclick="on(this)" id="test" style="background:red;">TEST THIS STUFF OUT</p>
JS
var testSwitch = 0;
var machineSwitch = 0;
function on(element){
if (machineSwitch==0){
element.style.background="green";
element.innerHTML="STATUS:ON";
machineSwitch=1;
} else if(machineSwitch==1){
element.style.background="red";
element.innerHTML="STATUS: OFF";
machineSwitch=0;
}
}
It is more convenient to use the data- attributes and use case switch for more flexibility if you are adding more colors to it.
JS
function on(element){
switch (element.getAttribute('data-machineSwitch')) {
case '0':
element.style.background="green";
element.innerHTML="STATUS:ON";
element.setAttribute('data-machineSwitch', '1');
break;
case '1':
element.style.background="red";
element.innerHTML="STATUS:OFF";
element.setAttribute('data-machineSwitch', '0');
break;
}
}
<p onclick="on('test', testSwitch)" id="test" style="background:red;">TEST THIS STUFF OUT</p>
<script>
var testSwitch = 0;
function on(element, machineSwitch){
if (machineSwitch==0){
document.getElementById(element).style.backgroundColor ="green";
document.getElementById(element).innerHTML="STATUS:ON";
testSwitch=1;
}
else if(machineSwitch==1){
document.getElementById(element).style.backgroundColor="red";
document.getElementById(element).innerHTML="STATUS: OFF";
testSwitch=0;
}
}
</script>
So this Is what the Html Looks like on the page http://postimg.org/image/pdzzkmifx/. What my codes do is switch the shirt color according to witch button is pressed. The buttons are the div (color and shape made in css).
Css apart from shaping the boxes isn't really relevant here.
So how do i solve the Uncaught ReferenceError: $ is not defined error.
(im trying to make the old picture fade out and the newly selected one fade in)
(i think the problem is in the javascript)
HTML
<body>
<div id="wrapper">
<div id="content">
<img id="shirt" src="images/white-t-shirt.png" />
</div>
<div id="choices">
<div id="redBox" class="smallbox" onclick="red()">
Red
</div>
<div id="greenBox" class="smallbox" onclick="green()">
Blue
</div>
<div id="blueBox" class="smallbox" onclick="blue()">
Blue
</div>
<div id="whiteBox" class="smallbox" onclick="white()">
White
</div>
</div>
</div>
</body>
JavaScript
function red(){color = "red"; change();}
function green(){color = "green"; change();}
function blue(){color = "blue"; change();}
function white(){color = "white"; change();}
function O(obj)
{
if (typeof obj == 'object')
return obj;
else
return document.getElementById(obj)
}
function change()
{
switch (color) {
case "red":
imagePath = 'images/red-t-shirt.png';
break
case "green":
imagePath = 'images/green-t-shirt.png';
break
case "blue":
imagePath = 'images/blue-t-shirt.png';
break
case "white":
imagePath = 'images/white-t-shirt.png';
break
}
O("shirt").src = imagePath;
$(O("#shirt")).fadeOut(700, function () {
$(this).attr('src', imagePath).fadeIn(700);
});
}
I changed your code a little bit, now it seems to be working:
jQuery
var color = '';
$(".smallbox").click(function()
{ var color = $(this).data('val');
switch (color) {
case "red":
imagePath = 'images/red-t-shirt.png';
break
case "green":
imagePath = 'images/green-t-shirt.png';
break
case "blue":
imagePath = 'images/blue-t-shirt.png';
break
case "white":
imagePath = 'images/white-t-shirt.png';
break
}
$("#shirt").src = imagePath;
console.log(imagePath);
$("#shirt").fadeOut(700, function () {
$("#shirt").attr('src', imagePath).fadeIn(700);
});
});
JSFiddle
I have 3 sections of specific interest on my home page.
What I'd like to do is set up links that call a javascript function that makes sure 2 sections are hidden and ONLY the section whose button was clicked is displayed.
Here's my code:
<div id="idc" class="leftFloat"><span id="title" class="title1">Introduction</span></div>
<div class="rightFloat">
<div id="agri"><a onclick="ContentSwitch('Agri');">Agri Industries</a></div>
<div id="ict"><a onclick="ContentSwitch('ict');">ICT Investments</a></div>
<div id="intro"><a onclick="ContentSwitch('intro');">Introduction</a></div>
</div>
<div id="agriContent" style="display: none;">
<div class="vrtlay_both">AGRI INDUSTRIES</div>
</div>
<div id="ictContent" style="display: none;">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<div id="introContent">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<script type="text/javascript">
function ContentSwitch(id) {
if (id = "Agri") {
if (document.getElementById("agriContent").style.display = "none") {
document.getElementById("agriContent").style.display = "block";
// Hide other content
document.getElementById("ictContent").style.display = "none";
document.getElementById("introContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(0, 100, 0)";
document.getElementById("idc").style.color = "rgb(255, 255, 255)";
document.getElementById("title").innerHTML = "Agri Industries";
} else {
return;
}
}
if (id = "ict") {
if (document.getElementById("ictContent").style.display = "none") {
document.getElementById("ictContent").style.display = "block";
// Hide other content
document.getElementById("agriContent").style.display = "none";
document.getElementById("introContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(36, 46, 111)";
document.getElementById("idc").style.color = "rgb(255, 255, 255)";
document.getElementById("title").innerHTML = "ICT Investments";
} else {
return;
}
}
if (id = "intro") {
if (document.getElementById("introContent").style.display = "none") {
document.getElementById("introContent").style.display = "block";
// Hide other content
document.getElementById("agriContent").style.display = "none";
document.getElementById("ictContent").style.display = "none";
// Change the look of the title
document.getElementById("idc").style.backgroundColor = "rgb(255, 255, 255)";
document.getElementById("idc").style.color = "rgb(0, 0, 0)";
document.getElementById("title").innerHTML = "Introduction";
} else {
return;
}
}
}
</script>
The javascript isn't firing.
I'm aware that this isn't the most elegant (or necessarily efficient) way of doing this, so if anyone can suggest a better way, I'm all ears.
Right now though, I'd just really like for this to work, but I can't see the problem.
Comparisons in Javascript use the double equals operator (==), not a single equals, so you're assigning the values in your if statements. Try changing them and see if it works.
<deep breath>
Ok...
if (id = "Agri") {
Well there's your actual problem. You're making an assignment = not a comparison ==.
Now to improve the code.
"id" is exclusive and a constant expression so you should arguably use a switch here, but you should at least be using elseif.
if (document.getElementById("agriContent").style.display = "none") {
Again, wrong operation here, but you're also failing to capture a reference to the element you're intertested in so you're losing performance when you run getElementById over and over again. Further, you're testing for a particular style property so you're tightly coupled to an implementation. This makes your code much less flexible and much more error prone. CSS classes are your friends: use them, change their application, leave style alone.
} else {
return;
}
Else do nothing? You're doing this to compensate for the lack of elseif statements in previous logic - this block is just confusing.
I'd suggest using CSS classes and jQuery to do this.
Instead of passing in a string value do something like this:
<div id="agri"><a onclick="ContentSwitch($("#agriContent"));">Agri Industries</a></div>
<div id="ict"><a onclick="ContentSwitch($("#ictContent"));">ICT Investments</a></div>
<div id="intro"><a onclick="ContentSwitch($("#introContent"));">Introduction</a></div>
In your content panels, do this:
<div id="agriContent" class="invisible">
<div class="vrtlay_both">AGRI INDUSTRIES</div>
</div>
<div id="ictContent" class="invisible">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
<div id="introContent" class="visible">
<div class="vrtlay_both">ICT INVESTMENTS</div>
</div>
Then, in ContentSwitch, do something like this:
function ContentSwitch(div) {
$(".visible").addClass("invisible").removeClass("visible");
div.removeClass("invisible").addClass("visible");
}
Might not be perfect, but the best I can come up with off the top of my head.
This is just a suggestion but you could refactor your code a bit.
var agriContent, ictContent, introContent, idc, title;
function ContentSwitch(id) {
agriContent = agriContent || document.getElementById("agriContent");
ictContent = ictContent || document.getElementById("ictContent");
introContent = introContent || document.getElementById("introContent");
idc = idc || document.getElementById("idc");
title = title || document.getElementById("title");
switch (id) {
case "Agri":
if (agriContent.style.display !== "none") {
return;
}
agriContent.style.display = "block";
ictContent.style.display = "none";
introContent.style.display = "none";
idc.style.backgroundColor = "rgb(0, 100, 0)";
idc.style.color = "rgb(255, 255, 255)";
title.innerHTML = "Agri Industries";
break;
case "ict":
// ...
break;
case "intro":
// ...
break;
}
}