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/
Related
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>
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.
I'm currently learning JavaScript, but I'm very weak on the fundamentals. I'm trying to write a function that changes the background color when a link is clicked, can you please advise me on what I'm doing wrong?
<head>
<script type="text/javascript">
function change()
{
var abra = document.getElementbyId("body").style;
abra.background-color = "black";
}
</script>
</head>
<body>
<div id="body" style="background-color: red;">
Test
sdfdsfsdfds
</div>
</body>
EDIT: For clarification, I was trying to change the background color of the DIV "body".
The property you're looking for is backgroundColor:
abra.backgroundColor = "black";
In general, Javascript uses the corresponding camelCase for CSS style properties. See a list of some properties for examples.
Instead of
var abra = document.getElementbyId("body").style
abra.background-color = "black";
try
document.body.style.backgroundColor = "black";
document.getElementbyId("body")
looks for an element with ID body, and
abra.background-color
is the same as
(abra.background) - color
which will probably result in an error telling you there is no var named color.
use camelCase:
background-color => backgroundColor
var abra = document.getElementById("body").style;
abra.backgroundColor = "black";
But if you want the body tag use:
document.getElementsByTagName("body")[0]
or
document.body // recommended
I am a JavaScript newbie. I have the following code and it is behaving very strangely. What it is supposed to do is originally set the background color to red, then cycle through a series of background colors after an alert dialogue is cleared. Color names are currently in string formats, but the same behavior results if I use the hex IDs.
Usually, when the page is loaded, it starts off coloring the body red like it is supposed to. The first alert clear sometimes changes the background to orange, sometimes not, then there is no change as the next dialogues (yellow, green, blue, indigo, black) are cleared until the last color change, which sometimes takes and sometimes doesn't.
<html>
<head>
<title>Color Flasher</title>
</head>
<body>
<script type="text/javascript">
function color1() {
document.body.style.backgroundColor = 'red';
}
function color2() {
document.body.style.backgroundColor = 'orange';
}
function color3() {
document.body.style.backgroundColor = 'yellow';
}
function color4() {
document.body.style.backgroundColor = 'green';
}
function color5() {
document.body.style.backgroundColor = 'blue';
}
function color6() {
document.body.style.backgroundColor = 'indigo';
}
function color7() {
document.body.style.backgroundColor = 'black';
}
function color8() {
document.body.style.backgroundColor = 'violet';
}
color1();
alert("ready for another color? - orange");
color2();
alert("ready for another color? - yellow");
color3();
alert("ready for another color? - green");
color4();
alert("ready for another color? - blue");
color5();
alert("ready for another color? - indigo");
color6();
alert("ready for another color? - black");
color7();
alert("ready for another color? - violet");
color8();
</script>
<center>
<h1>Color Flasher<br></h1>
</center>
<hr>
</body>
</html>
Can someone explain where I'm getting the syntax wrong?
You should try placing your <script> in the <head> or if you really want your script in the body tag, you should place before the closing </body> tag.
FYI it works fine on my side. Tested on JSFiddle and they automatically place the <script> in the body tag.