I m newer to javascript, Now i am getting started to javascript.
Here is the link(run with example):
http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Here, i have raised one doubt,
if (image.src.match("bulbon")) {
//do stuff
}
May i know, what is "bulbon" why we have use?
And i tried another one example, Here is my code:
<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb" onclick="changebulb()" alt=bulb"/>
<script>
function changebulb() {
var image=document.getElementById("bulb");
if(image.src.match("bulbon")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}
}
When i run my code, it works partially , that is when i click, it will becomes bright, but again i click it didn't show as dim..
May i know what is my mistake?
Thanks in advance.
In your if condition
if(image.src.match("bulbon"))
you are trying to match bulbon in your gif and both the gif does not have bulbon naming.
It should be like
if(image.src.match("bulbon"))
image.src="dim-bulb.jpg";
}
else {
image.src="bulbon.jpg"; }
or check the bright image correctly like this:
if(image.src.match("bright")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}
bulbon = bulb on
The code below simply checks if the image being used is the bulb with the light on and replaces the image with off version.
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
To fix your code, change it to this:
function changebulb() {
var image=document.getElementById("bulb");
if(image.src.match("bright")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}
}
"bulbon" is part of the filename pic_bulbon.gif, but not pic_bulboff.gif so if(image.src.match("bulbon")) { is testing to see if the bulb is currently on.
The reason it onbly partially works is because you renamed the files - to get it working again, simply replace bulbon with bright:
<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb" onclick="changebulb()" alt=bulb"/>
<script>
function changebulb() {
var image=document.getElementById("bulb");
if(image.src.match("bright")) {
image.src="dim-bulb.jpg";
}
else {
image.src="bright.jpg";
}
}
bulbon is the image name found in the src of the image tag when you see the bright light.
So when it is clicked you check the src and change the src to some other image let's say bulboff.
Your code should be like:
function changebulb() {
// get the element with id 'bulb'
var image=document.getElementById("bulb");
// check the src attribute of the image tag
if(image.src.match("dim-bulb")) {
image.src="bright.jpg"; // change the src attribute
} else {
image.src="dim-bulb.jpg"; // change the src attribute
}
}
Try this:
var image=document.getElementById("bulb");
if(image.src.match("dim-bulb")) {
image.src="bright.jpg";
}
else {
image.src="dim-bulb.jpg";
}
<img width="300px" height="300px" src="dim-bulb.jpg" id="bulb" onclick="changebulb()" alt=bulb"/>
<script>
function changebulb() {
var image=document.getElementById("bulb");
if(image.src.match("dim-bulb.jpg")) {
image.src="bright.jpg";
}
else {
image.src="dim-bulb.jpg";
}
}
</script>
I think this may be answer to your question.
Related
I've written a simple html and js code to toggle between two images on click but relative url is not working in js code. code which is not working:
<img id="demo" src="one.jpg" ></img>
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "one.jpg")
{
pic.src="two.jpg";
}
else
{
pic.src="one.jpg";
}
}
</script>
When I changed relative url to absolute its working fine:
<script>
var pic = document.getElementById("demo");
function change()
{
if (pic.src == "file:///D:/javaScript_tut/one.jpg")
{
pic.src="file:///D:/javaScript_tut/two.jpg";
}
else
{
pic.src="file:///D:/javaScript_tut/one.jpg";
}
</script>
replace
if (pic.src == "one.jpg")
with
if(pic.src.indexOf("one.jpg") >= 0)
I have the next code:
<p>
<img alt="" src="imagini/slide1.png"
style="height: 64px; width: 64px" id="imgClickAndChange"
onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
}
</script>
That is changing an image (phase 1) after clicking on it into another image(phase 2). I want to link the second image (phase 2) to an index.php page. How do I do that? Is there a way of altering or interfering in the changeImage function.
Use the else block of the if statement you already have to change window.location.
function changeImage() {
if (document.getElementById("imgClickAndChange").src.indexOf("imagini/slide1.png") !== -1) {
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
} else {
window.location = "index.php";
}
}
You could use jQuery to easily attach a click event on the second image only. Or you could have 2 images in the page (one alone and one inside a link) and then hide and show one image or another.
Try something like this:
var myEl = document.getElementById("imgClickAndChange");
var parent = myEl.parentNode();
var link = document.createElement('a');
link.href = 'http://www.google.com';
link.appendChild(myEl);
parent.removeChild(myEl);
myEl.src = "imagini/platform.png";
parent.appendChild(link);
try this
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "imagini/slide1.png")
{
document.getElementById("imgClickAndChange").src = "imagini/platform.png";
}
else
{
document.location.href="index.php";
}
}
I'm trying to add a toggle button to my website wherein it enables or disables the functionality of a certain feature, however while testing it, I bump into a problem wherein it does not alert even if the toggle works or the image changed. How can I make it work, any help and suggestion is appreciated.
HTML:
<img id="toggle-video" src="/images/Icons/10_device_access_video.png"
style="background-color:#C0C0C0; height: 20px; width:20px;" alt="" />
<img id="toggle-volume" src="/images/Icons/10_device_access_volume_on.png"
style="background-color:#C0C0C0; height: 20px; width:20px; margin-left:-5px;" alt="" />
JQUERY:
$("#toggle-video").on({'click':function() {
var origsrc = $(this).attr('src');
var src = '';
if (origsrc == '/images/Icons/10_device_access_video.png') src = '/images/Icons/10_device_stop_video.png';
// {
// alert(video success);
// }
if (origsrc == '/images/Icons/10_device_stop_video.png') src = '/images/Icons/10_device_access_video.png';
// {
// alert(volume success);
// }
$(this).attr('src', src);
}
});
You need to place the code which change the src value inside { } of your if condition:
$("#toggle-video").on({
'click': function () {
var origsrc = $(this).attr('src');
var src = '';
if (origsrc == '/images/Icons/10_device_access_video.png') {
src = '/images/Icons/10_device_stop_video.png';
alert('video success');
}
if (origsrc == '/images/Icons/10_device_stop_video.png') {
src = '/images/Icons/10_device_access_video.png';
alert('volume success');
}
$(this).attr('src', src);
}
});
Fiddle Demo
Code works fine.
You are trying to alert variables instead of string
alert(video success);
alert(volume success);
alert(`video success`);
alert(`volume success`);
I'm trying to make a div visible/invisible using java script. I have a function that is supposed to change the visibility to 'none' if the div is visible and to 'visible' if the div is none. However it doesn't seem to be working. Here is the code:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
I Tried Your Code and Its Working For me. Please Find Below Code. Set Visibility for the Element initially Otherwise its not working at the beginning.
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
<div id="divTools" style="visibility:visible">
<p>Some Text</p>
</div>
<input type="button" onclick="toggleTools()" value="click" />
Go with
document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';
Try this way:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.display!='none')
{
element.style.display='none';
}
else
{
element.style.display='block';
}
}
</script>
But you can use JQuery.
$('#divTools').toggle();
The last thing don't work it's the first time whom charge the page. I check if visibility == '' and this works.
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible' || element.style.visibility=='')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
live demo: http://jsfiddle.net/Magicianred/9vTeR/1/
Enjoy your code.
The code works, provided you set the visibility initially:
via CSS:
#divTools {
visibility:hidden;
}
jsFiddle example
Or via JavaScript:
document.getElementById('divTools').style.visibility='hidden';
jsFiddle example
I have an image defined as following:
<div id="logo" class="exhibit-flowingFacet">
<div class="wrapper">
<img src="path/to/the/image/logo.png">
</img>
</div>
</div>
I want with a javascript get the image by its src and hide it.
function hideImage() {
if (document.getElementById()
{
if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
{
document.style.visibility = 'hidden';
}
}
};
hideImage();
But the code didn't work!! any idea?
With jQuery you could write
$('img[src="path/to/the/image/logo.png"]').hide();
Try this script:
function hideImage() {
var path = 'path/to/the/image/logo.png';
var img = document.getElementById('logo').getElementsByTagName('img')[0];
if (img && img.getAttribute('src').indexOf(path) > -1) {
img.style.visibility = 'hidden';
}
}
if (window.addEventListener) {
window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
window.attachEvent('onload', hideImage);
}
JSFiddle
You can try this:-
$('img[src="path/to/the/image/logo.png"]').css("display","none");
or try this:-
this.style.display = "none";
getElementsByClassName('wrapper') is an array, which is why you have to access the src-attribute of the first element - at least in your case.
if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")
You have to make sure you have a link to jquery library in your header using this code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
You could diplay:none in css if you wanted it not to render on the screen, just pass the image source into the function
function hideImage(imageSrc) {
$('img[src=" + imageSrc + "]').css("display","none");
}
and turn it back on using
$('img[src="path/to/the/image/logo.png"]').css("display","block");