I'm new to Javascript coding and I've come across this TryIt page on w3schools. I understand that the code creates two buttons, which turn a bulb on and off when clicked, but I'd like some more detailed explanation from some Javascript experts on what each line in this code exactly does.
For example, does
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">
just create a button and make the image titled bulbon.gif appear when clicked? I'm slightly confused. Here is the code:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image. </p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
Thanks.
Let's have a look at the code :
onclick="document.getElementById('myImage').src='pic_bulbon.gif'"
OnClick bind an event on the button, which will be fired when the button is clicked.
There are various events, depending on the kind of element you are using. Like, onKeyUp, onKeyDown, onSelect etc
document.getElementById('myImage') tells the browser to retrieve the DOM element which ID is "myImage" (/!\ remember IDs must be unique in your code, if not the behaviour is unknown and your code won't work as expected. getElementsByName will give back an array with the DOM elements matching the given name. People tend to be confused between the 2 functions, yet pay attention at the ending S: getElement/getElements)
.src = "pic_bulbon.gif" replace the previously found element source with the new picture and so force the redraw of that element.
So, no it does not create a new element but change the property of an existing one
Related
I'm working on this project where i need to make a site with sticky notes that can change color, get deleted, get resized and move around and be ablo to move over other notes.
i've been falling back lately. Used so many hours on "basic" functions that won't work and now im here!
So i want to hear if someone could help med with:
Getting the onclick function to work! I need to hide the Jscolor changer
Getting a element deleted when clicking on the delete button.
And when adding a new Note/sticker the Jscolor does work.
When i run the site the first note i get it can change the color, but when i add a new i cant i want to find a solution for that
I hope anyone can helt me. And the guys that can help me with all the this will get something from me :)
Check the code
http://codepen.io/Qbinx/pen/OmObRg
<p class="half-circle">
<button class="addNoteBtn">
<i class="ion-android-add-circle"></i>
</button>
</p>
<script src="jscolor.js"></script>
<!--<div class="sticker" id="rect">
<div class="bar"></div>
<button class="color" onclick="colorpicker"><i class="ion-android-color-palette"></i></button>
<button class="deleteBtn" onclick="deleteaction"><i class="ion-android-delete"></i></button>
<textarea></textarea>
<input class="jscolor" onchange="update(this.jscolor)" value="cc66ff">
</div>-->
<script type="text/javascript">
function update(jscolor) {
document.getElementById('rect').style.backgroundColor = '#' + jscolor;
}
</script>
In your code:
<script type="text/javascript">
function update(jscolor) {
document.getElementById('rect').style.backgroundColor = '#' + jscolor;
}
</script>
You are calling getElementById(). There can only be one unique ID.
Basically what I'm trying to say is:
You have 1 rectangle. Rec 1. You can change it's color because the ID is rect. When you create a new rectangle, you can't assign the ID called rect again because when you call getElementById(), it will only get one element with that ID and it will be the first one that you created which is Rect 1.
Each rectangle ID needs to be unique. When you call the color picker, you need to getElementById() of the unique rectangle.
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
Hi I have a problem with my function, when I call it to show my hidden div it does not work. It does not show the hidden div. I followed previous examples from what have been posted in stackoverflow but still my code does not work.
This is my html file
<div id="playTheGame" class="css/outer" style="display:none;" >
<div class="css/inner">
<h1>Choose!</h1>
<section id="hand">
<img src="images/rock.png">
<img src="images/paper.png">
<img src="images/scissors.png">
</section>
</div>
</div>
My Function
<script>
function logSuccess(){
document.getElementById("playTheGame").style.visibility="visible";
}
</script>
The Button I used for the function
<input type="button" onclick="logSuccess()" value="Show">
Change your code to this
document.getElementById("playTheGame").style.display = "block";
Since you hid it using the display property, show it using the display property.
There are two options for this:
One using JavaScript:
object.style.display="block"; // where object will be the playThemGame id element..
And the other one using jQuery; JavaScript library.
$("#playTheGame").show();
The option two won't work, because you will have to write the event function too, So just use the first one as:
document.getElementById("playTheGame").style.display="block";
Edit:
Since you are using
document.getElementById("playTheGame").style.display="block";
To disply the result, then you must use this to remove the display!
document.getElementById("playTheGame").style.display = "none"; to hide it back!
The basic idea is that, this will just shift the object-->style-->display's value to none Its not going to add any more attribute. Its just going to shift current attribute's value.
I have the following code on a page on my site — when the user clicks on the image a sound plays:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<div id="soundimage">
<img src="image.png" />
</div>
It all works great, but the image is at the bottom of the page, and when the user clicks the image they are redirected back to the top of the page. Is there any way to get this working so that there is only an audio change, and not a visual one (if that makes sense!)?
When using a mouseover function instead, such as
<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a>
the user remains where they were on the page, but I would like them to have the option of playing the sound on click and not on rollover.
The problem is your href attribute. # as an anchor sends it to the top of the page. Use
...
Also, always include an href attribute to links.
You can (and I think is more correct in cases where Javascript support is limited), to use a link like:
...
instead of Grexis one, because if the browser you're using doesn't support Js, then the "onclick" event will never be fired and thus Js won't be read. It won't be a problem, probably, but still you should consider using better coding techniques.
instead of having the onclick event in an a tag, get rid of it and put it on the img tag. if you like the cursor for links, you can change the style too.
Example code has been indented so it actually shows in the post.
<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")