Picture fading in and out ($ is not defined) - javascript

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

Related

how to show image on click, and hide it again when clicking again

I want to when I click on a sentence or a button an image appears, and when I click it again it disappears. but my code doesn't seem to work using JS and HTML.
let pic = document.getElementById("hiddenclickimg");
let word = document.getElementById("hiddenclick");
function showPic(){
pic.hidden = 'false' ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
}
word.onclick = showPic;
<h3 id="Work">Work Experience</h3>
<div class="work">
<ul>
<li>
<img
src="./Images/Alex Sydney.jpg"
alt="alex sydney"
id="hiddenclickimg"
hidden="true"
/>
<button id="hiddenclick">Alex Sydney Hospital</button>
</li>
</ul>
</div>
<script src="./main.js"></script>
You can use the onclick of a button and toggle a class that hides the image when it has that class.
HTML:
<button onclick="imageClick()">Toggle Image</button>
CSS:
.hidden {
opacity: 0;
}
Javascript:
const image = document.getElementById('hiddenclickimg');
const imageClick = () => {
image.classList.toggle('hidden');
}
There are different CSS properties you could use to hide the image, but opacity is a good basic one.
You don't need to set 2 ids to do the trick using css property display none.
For example you want to hide that image:
<img id="dog_image" src="dog.png" alt="Rex the Labradoodle" >
function hideDog() {
const dog = document.getElementById("dog_image");
if (dog.style.display === "none") {
dog.style.display = "block";
} else {
dog.style.display = "none";
}
}
And then just set the button:
<button onclick="hideDog()">Hide/Show my dog</button>
you can use flag to change state of the image like following
let imagehidden =false
let pic = document.getElementById('hiddenclickimg');
let word = document.getElementById('hiddenclick');
function showPic(){
if(imagehidden){
pic.hidden = false ;
word.style.color = 'red';
word.style.backgroundColor = 'blue';
imagehidden=false
}
else{
pic.hidden =true;
imagehidden=true
}
}

Can't find image, but src is correct

I have a div at the bottom of the page that contains an image that changes based on a page variable. Here is my code to set the image:
<div>
<p>Data from #ViewBag.site.</p>
<div id="logo"></div>
</div>
<script>
var site = '#(ViewBag.site)';
var elem = document.createElement("img");
switch(site){
case "WeatherUnderground":
elem.src = '~/Images/wunderground.jpg';
break;
case "Forecast.io":
elem.src = '~/Images/fio.jpg';
break;
case "NOAA":
elem.src = '~/Images/noaa.png';
break;
case "WeatherUnlocked":
elem.src = '~/Images/wunlocked.jpg';
break;
case "APIXU":
elem.src = '~/Images/apixu.jpg';
break;
case "OpenWeatherMap":
elem.src = '~/Images/owm.jpg';
break;
}
elem.setAttribute("height", 100);
elem.setAttribute("width", 133);
elem.setAttribute("alt", site);
document.getElementById("logo").appendChild(elem);
</script>
When I visit this page, the image doesn't show up (instead, the alternate text plus black square/X combination shows up). When I inspect the alternate image, I see that it has the correct source. If I copy the source path into the browser, it does take me to the image, so I know the source is correct. However, the picture isn't showing up, so obviously something is wrong. Any thoughts?
You are doing a switch statement against a string that never changes.
var site = '#(ViewBag.site)';
But there is no case in your switch statement for this string so elem.src is never set.

JavaScript "example" of a switch to compare HTML button id's

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!

Making a background like a radio button switching between an on state on off state when clicking on it

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>

Content switching with Javascript

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;
}
}

Categories