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.
Related
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
I am completely new to coding in general. I've started with the very basics of HTML, CSS and JavaScript.
I have two paragraphs:
<p id="title1">Change this</p>
<p id="title1"> Change this too! </p>
While the first one gets automatically changed by:
<script type="text/JavaScript">
$('#title1').html('Changed!');
</script>
the second one doesn't. But shouldn't it? Since all #title1 are being changed?
I have the same problem for the onclick version. The first paragraph gets changed when clicking on it, the second doesn't.
<p id="title3" onclick="sayGoodbye();">Toggle this Hello - Goodbye</p>
<p id="title3" onclick="sayGoodbye();">Thing to click on</p>
<script type="text/javascript">
function sayGoodbye(){
$("#title3").html('Goodbye');
$("#title3").click(function(){
$("#title3").html("Hello again!");
$("#title3").off("click");
});
}
</script>
When you select an element by its id, only the first one gets selected because you're only supposed to use one id on one element! Each id should only ever be used once on a page!
If you need to get a bunch of elements together 'by' something, do it 'by class'.
$(".title1").html("Changed!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title1">Change this</p>
<p class="title1"> Change this too! </p>
ID attribute has to be unique for each HTML tag. You can use class attribute to act on multiple tags.
The id attribute should be unique at least in the same level child tree.
Use class instead and listen to .click() with $(this) to get
current clicked element.
If you want to call a function using onclick attribute pass clicked element to it using this like onclick="sayGoodbye(this);".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="title3" onclick="sayGoodbye(this);">Toggle this Hello - Goodbye</p>
<p class="title3" onclick="sayGoodbye(this);">Thing to click on</p>
<script type="text/javascript">
function sayGoodbye(t){
$(t).html('Goodbye');
$(t).click(function(){
$(this).html("Hello again!");
$(this).off("click");
});
}
</script>
I am a beginner in Javascript and I am not absolutely sure how to put together the function what I try to achieve.
So, I have a HTML5 page and I must stick to my ID structure as different functions are tied to IDs.
My problem is I have an id within an id (It must stay an ID, it cannot be swapped with class)
E.G.
<div id="outterid">
CLICK ME
<div id="innerid">
<p>Hello World</p>
</div>
</div
Where, <div id=outterid"> pops up as a tooltip (My other javascript takes care of that function. And within that the link CLICK ME and the hidden <div id=innerid">.
So when you click CLICK ME, <div id=innerid">becomes visible. (Note: <div id="outterid"> is visible, while you are clicking)
So I need to achieve the href="#innerid" through javascript, because at the moment simply href=""
E.G.
CLICK ME
does not work, because the #innerid within the #outterid.
Also, the 'CLICK ME' link has to be triggered by onmouseover="this.click();". So, the link clicked when the mouse hovers over it.
I hope I managed to clearly explain what is my problem and what result I am looking for.
Thanks for your help in advance.
Are you talking here about scrolling to the relevant div (e.g. #innerid)? In which case I don't think your problem has anything to do with javascript, but rather you've missed the a off of <href="#innerid">CLICK ME</a>... I've tried replicating your problem in JSFiddle and with CLICK ME it scrolls to the correct div regardless of if it's in a nested outer div or not.
It's not clear exactly what you're after here but i've had a shot. This example will display the #innerid div when you click on the anchor tag. Hopefully this will help you.
function myFunction(href) {
var id = href.split('#')[1];
document.getElementById(id).style.display = 'block';
}
#innerid { display:none; }
<a onclick="myFunction(this.href)" href="#innerid">CLICK ME</a>
<div id="outterid">
<div id="innerid">
<p>Hello World</p>
</div>
</div
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 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")