If I use two buttons it works fine now I wonder if I could use just one and how, this is the code for two buttons however I want to use only one button to execute the code that changes the style of the div, for instance the buttons code that I wrote is:
<title></title>
<style>#ok{width:100px;height:100px;background-color:black;}</style>
</head>
<body>
<div id="ok">ok</div>
<button id="a">on</button>
<button id="b">off</button>
<script>
var a=document.querySelector("#a");
var b=document.getElementById("ok");
a.addEventListener("click",k,false);
var c=document.querySelector("#b");
c.addEventListener("click",g,false);
function k(){
b.style.backgroundColor="yellow";
};
function g(){
b.style.backgroundColor="black";
};
</script>
I think what do you want to do is:
document.querySelector("#a").addEventListener("click", k, false);
function k() {
var a = document.querySelector("#a");
var ok = document.getElementById("ok");
if(ok.style.backgroundColor=="yellow"){
a.innerHTML = "on";
ok.style.backgroundColor = "black";
}
else{
a.innerHTML = "off";
ok.style.backgroundColor = "yellow";
}
};
This your working DEMO.
Related
The unexpected behavior I'm getting is when clicking the donate or undonate button. It takes 2 clicks initially for the tracker to display the incremented or decremented number despite the color change happening immediately. Once it does change the number on the second click, the 3rd click and on using the same button will work normally to increment or decrement.
In addition to that, if you switch the button you're clicking to the other, it still performs the previous action first.Hopefully this explanation of the issue makes sense. Appreciate any direction that can be given as I am still new!
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href='style.css' />
<title>Front-End Portfolio Project</title>
</head>
<body>
<h1>Donate Food 2 Me</h1>
<p id="container"></p>
<p id='caption'>food quantity</p>
<button id="donate">Donate</button>
<button id="undonate">Un-Donate</button>
<script type="text/javascript" src='main.js'></script>
</body>
</html>
JS:
const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
var i = 0;
tracker.innerHTML = i;
donate = function(){
donateButton.style.backgroundColor = 'red';
tracker.innerHTML = i++;
}
undonate = function(){
unDonateButton.style.backgroundColor = 'blue';
tracker.innerHTML = i--;
}
donateButton.addEventListener("click", donate);
unDonateButton.addEventListener("click", undonate);
The only mistake you made is ignoring the difference between i++ and ++i (i-- and --i).
Change your code as below (You can see the result here):
donate = function(){
donateButton.style.backgroundColor = 'red';
tracker.innerHTML = ++i;
}
undonate = function(){
if (i > 0) {
unDonateButton.style.backgroundColor = 'blue';
tracker.innerHTML = --i;
}
}
I need to use .onclick method to change the color of a link when clicked but the problem is when i click on another link the first link color don't return back to the original color, so ny suggestions?
I also believe a CSS solution is better, but if you really want an onClick method, you can try the following:
const one = document.getElementById("one");
const two = document.getElementById("two");
function updateOne() {
reset();
one.style.color = "red";
}
function updateTwo() {
reset();
two.style.color = "red"
}
function reset() {
one.style.color = "blue";
two.style.color = "blue";
}
<html>
<body>
Link One
<br>
Link Two
</body>
</html>
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>
Sorry for so many questions, but I suck at javascript and want to get good at it. I'm trying to make a page change colors when you press a button as another proof of concept for me, but it's not working and I'm not entirely sure why...
<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
button.eventlistener(BGchange, BGcolor());
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
document.body.style.background = white;
}
else
if(BG==1){
document.body.style.background = black;
}
}
</script>
</body>
</html>
k, fixed a little, here's what I have now:
<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
BGchange.addEventListener("click", BGcolor);
var BG++
function BGcolor (){
if(BG==0){
backgroundcolor = "white";
}
else
if(BG==1){
backgroundcolor = "black";
}
}
</script>
</body>
</html>
If you're trying to listen for an event click, then you need something like this:
document.getElementById("BGchange").addEventListener("click", BGcolor);
Then, you need to fix some things in this function:
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
document.body.style.background = white;
} else if (BG==1) {
document.body.style.background = black;
}
}
Because you are trying to reference BG2 before it has been initialized so it is not clear what you want to be doing there.
In order, the things I changed:
Get the DOM element for the button with document.getElementById()
Use addEventListener() which is the standard way of adding event handlers
Change to the click event which is what buttons create when you click on them
Pass just a reference to the event handler as BGcolor without the parens. You were calling it immediately rather than passing a reference to the function that can be called later.
In addition, a bunch of things to fix in your BGcolor() function:
Variables that remember their state from one function call to the next must be declared outside that function.
A color value is a string so you would use "white", not white.
To change just the background color, it's best to use the backgroundColor property.
Here's a working version:
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
document.getElementById("BGchange").addEventListener("click", BGcolor);
var curColor = "white";
function BGcolor (){
if (curColor == "white") {
curColor = "black";
} else {
curColor = "white";
}
document.body.style.backgroundColor = curColor;
}
</script>
Working demo: http://jsfiddle.net/jfriend00/Nk2N5/
I've got a button with an image inside that I want to swap when clicked. I got that part working, but now I also want it to change back to the original image when clicked again.
The code I'm using:
<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>
And the Javascript:
function action() {
swapImage('images/image2.png');
};
var swapImage = function(src) {
document.getElementById("ImageButton1").src = src;
}
Thanks in advance!
While you could use a global variable, you don't need to. When you use setAttribute/getAttribute, you add something that appears as an attrib in the HTML. You also need to be aware that adding a global simply adds the variable to the window or the navigator or the document object (I don't remember which).
You can also add it to the object itself (i.e as a variable that isn't visible if the html is viewed, but is visible if you view the html element as an object in the debugger and look at it's properties.)
Here's two alternatives. 1 stores the alternative image in a way that will cause it to visible in the html, the other doesn't.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
var tgt = byId('ImageButton1');
tgt.secondSource = 'images/image2.png';
}
function byId(e){return document.getElementById(e);}
function action()
{
var tgt = byId('ImageButton1');
var tmp = tgt.src;
tgt.src = tgt.secondSource;
tgt.secondSource = tmp;
};
function action2()
{
var tgt = byId('imgBtn1');
var tmp = tgt.src;
tgt.src = tgt.getAttribute('src2');
tgt.setAttribute('src2', tmp);
}
</script>
<style>
</style>
</head>
<body>
<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>
<br>
<button onClick="action2();">click me<img id='imgBtn1' src="images/image1.png" src2='images/image2.png' width="16px"></button>
</body>
</html>
You need to store the old value in a global variable.
For example:
var globalVarPreviousImgSrc;
var swapImage = function(src)
{
var imgBut = document.getElementById("ImageButton1");
globalVarPreviousImgSrc = imgBut.src;
imgBut.src = src;
}
Then in the action method you can check if it was equal to the old value
function action()
{
if(globalVarPreviousImgSrc != 'images/image2.png')
{
swapImage('images/image2.png');
}else{
swapImage(globalVarPreviousImgSrc);
}
}
It's not a good idea to use global variables in javascripts use a closure or object literal. You can do something like using a closure
(function(){
var clickCounter = 0;
var imgSrc1 = "src to first image";
var imgSrc2 = "src to second image"
functions swapImage (src)
{
var imgBut = document.getElementById("ImageButton1");
imgBut.src = src;
}
function action()
{
if(clickCounter === 1)
{
swapImage(imgSrc1);
--clickCounter;
}else{
swapImage(imgSrc2);
++clickCounter;
}
}
})();
(I haven't run this code though)
This nice w3documentation gives you best practices.
Check this a working example just copy paste and run-
HTML
<button onClick="action();">click me<img src="http://dummyimage.com/200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>
JAVASCRIPT
<script>
function action()
{
if(document.getElementById("ImageButton1").src == 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1' )
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/dec4ce/fff.gif&text=Image+2';
else
document.getElementById("ImageButton1").src = 'http://dummyimage.com/200x200/000000/fff.gif&text=Image+1';
}
</script>
Check this working example - http://jsfiddle.net/QVRUG/4/