I want to change a picture in my site every 5 second and I have used this code!but it does'n work!
where is the problem!
<script type="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
var interval = setInterval(time, 5000);
}); // ending ')' was missing
</script>
<script type="text/javascript">
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
var name= mm11.style.display.toString();
if ( name=="block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display.toString() ="block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
</script>
Change
if(m22.style.display.toString() ="block")
with
if(m22.style.display.toString() == "block")
Also, you don't need the "toString()", because display is already a string.
Here is a shorter code:
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
if (m11.style.display == "block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display == "block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
Since you're already using jquery It seems to me that you can simply use
function time() {
$('#m1').toggle();
$('#m2').toggle();
}
You can directly use. Note that it should be == when comparing in If statement
document.getElementById('m1').style.display = 'none';
On the second if block, you miss-typed the comaprsion operator.
if(m22.style.display.toString() ="block")
Should be
if(m22.style.display.toString() =="block")
Better way is as follows:
HTML:
<div id="m1" style="display:block">Hello1</div>
<div id="m2" style="display:none">Hello2</div>
JS:
setInterval(time, 5000);
function time() {
$("#m1, #m2").toggle();
}
Refer LIVE DEMO
UPDATED:
As per #Sarah sh comment, you need to show images one by one.
Here is your functionality.
HTML:
<div class="img">Hello1</div>
<div class="img">Hello2</div>
<div class="img">Hello3</div>
<div class="img">Hello4</div>
JS:
var currObj = $(".img").first();
$(currObj).show();
$(".img").not(currObj).hide();
setInterval(rotateImage, 2000);
function rotateImage() {
var tempObj = currObj;
if ($(tempObj).is(":last"))
currObj = $(".img").first();
else
currObj = $(currObj).next();
$(tempObj).hide();
$(currObj).show();
}
Refer LIVE DEMO
Related
I was wondering how it is possible to make the button undo something too after clicking it. In my scenario just simple formatting of Text(Color,size etc), when you first click it, it formats the text as described in Javascript, but I would like to add a function, that when you click it again, that it undoes that.
`<script>
function myFunction(){
document.getElementById("demo").style.fontsize="25px";
document.getElementById("demo").style.color="#3AF702";
document.getElementById("demo").style.backgroundcolor="red";
}
</script>`
<button type="change" onclick="myFunction()">Change!</button>
I checked other articles already, which seemed to be related, but I did not get any smarter out of those, so my apologies in advance if it is a dup and thanks for your help!
<script>
var flag = true;
function myFunction(){
let el = document.getElementById("demo");
el.style.fontsize = flag ? "25px" : "";
el.style.color= flag ? "#3AF702" : "";
el.style.backgroundcolor=flag ? "red" : "";
flag = !flag;
}
</script>`
<button type="change" onclick="myFunction()">Change!</button>
The easiest way to do this is to add and remove a class
<style>
.change {
font-size: 25px;
color: #3AF702;
background-color="red"
}
</style>
<script>
var x = 0;
function myFunction() {
if (x == 0) {
document.getElementById("demo").classList.add("change");
x = 1;
} else {
document.getElementById("demo").classList.remove("change");
x = 0;
}
}
</script>
<button type="change" onclick="myFunction()">Change!</button>
Create an object that stores the initial values of your button and a variable which holds the state of it.
var state = 0;
var backup = {};
backup.fontSize = document.getElementById("demo").style.fontsize;
backup.color = document.getElementById("demo").style.color;
backup.background = document.getElementById("demo").style.backgroundcolor;
Now you can easily switch between the backup and the new values like this:
function myFunction() {
if (state == 0) {
document.getElementById("demo").style.fontsize = "25px";
document.getElementById("demo").style.color = "#3AF702";
document.getElementById("demo").style.backgroundcolor = "red";
state = 1;
} else {
document.getElementById("demo").style.fontsize = backup.fontSize;
document.getElementById("demo").style.color = backup.color;
document.getElementById("demo").style.backgroundcolor = backup.background;
state = 0;
}
}
var flag = true;
function myFunction(){
var x = document.getElementById("demo");
if (flag) {
x.style.backgroundColor = "red";
x.style.color="#3AF702";
x.style.fontSize="25px"
} else {
x.style.backgroundColor = "blue";
x.style.color="#dddddd";
x.style.fontSize="10px"
}
flag = !flag
}
function myFunction(){
demo.className = demo.className ? "" : "style"
}
.style {
font-size: 25px;
color: red;
background: blue;
}
<p id="demo">Hi!</p>
<button type="change" onclick="myFunction()">Change!</button>
<html>
<head>
<title>question 5</title>
</head>
<body>
<button id="b0" onclick="start()">Start Game</button>
<br>
<img src="happy_fish.png" id="fish" onclick="mySore()">
<script type="text/javascript">
var image_tracker = 'happy';
var image = document.getElementById('fish');
image.style.display = "none";
function change() {
if (image_tracker == 'happy') {
image.src = 'happy_fish.png';
image_tracker = 'sad';
} else {
image.src = 'sad_fish.png';
image_tracker = 'happy';
}
}
var timer;
function start() {
image.style.display = "block";
timer = setInterval('change();', 600);
}
function stop() {
clearInterval(timer);
}
function mySore() {
if (image_tracker == 'sad') {
var x = document.getElementById("myNumber").stepUp();
if (x >= 10) {
clearInterval(timer);
}
} else {
var y = document.getElementById("myNumber").stepDown();
if (y <= -10) {
clearInterval(timer);
}
}
}
</script>
<p><strong>Your Score: <input type="number" id="myNumber"></strong>
</body>
</html>
In this code i want to store the value of number in a variable so that in the if-else statement i can compare the value of that number and with 10 and -10 and perform the action in the if-else statement.
I also want to print out that if the number becomes more than 10 it will print out you win and when the number become less than -10 then it will print out you loss.
You could this <p id="message"></p> element next to your input, in your if-else statement add the following statements var xVal=document.getElementById("myNumber").value; and if(xVal>=10){ clearInterval (timer); document.getElementById("message").innerHTML="You Win"}, do the same work with other case. Check the following working solution:
<html>
<head>
<title>question 5</title>
</head>
<body>
<button id="b0" onclick="start()">Start Game</button>
<br>
<img src ="https://images.pexels.com/photos/45910/goldfish-carassius-fish-golden-45910.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" id ="fish" onclick="mySore()" height="200" width="200">
<script type="text/javascript">
var image_tracker = 'happy' ;
var image = document.getElementById('fish');
image.style.display = "none";
function change() {
if (image_tracker == 'happy'){
image.src = 'https://images.pexels.com/photos/45910/goldfish-carassius-fish-golden-45910.jpeg?auto=compress&cs=tinysrgb&h=650&w=940';
image_tracker = 'sad';
}
else{
image.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCvJNQB6U62UvdD5oinU1hbpUWeUDAniae39-rlP6T7ONJARhQ';
image_tracker = 'happy';
}
}
var timer;
function start(){
image.style.display = "block";
timer = setInterval ('change();',1600);
}
function stop() {
clearInterval (timer);
}
function mySore() {
if( image_tracker == 'sad' ){
var x = document.getElementById("myNumber").stepUp();
var xVal=document.getElementById("myNumber").value;
if ( xVal >= 10){
clearInterval (timer);
document.getElementById("message").innerHTML="You Win";
image.style.display = "none"; document.getElementById("myNumber").disabled=true
}
}
else{
var y = document.getElementById("myNumber").stepDown();
var yVal=document.getElementById("myNumber").value;
if ( yVal < -10){
document.getElementById("message").innerHTML="You lost";
image.style.display = "none"; document.getElementById("myNumber").disabled=true
clearInterval (timer);
}
}
}
</script>
<p><strong>Your Score: <input type="number" id="myNumber"></strong></p>
<p id="message"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<button id="start" type="button" onclick="myStart()" > Start</button>
<script>
function myStart() {
document.getElementById("start").style.display="none";
var rosso = casuale(0,1);
if (rosso==0) {
var imgtest1= document.createElement("input");
imgtest1.src="http://www.w3schools.com/tags/logo_w3s.gif";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)
}
document.getElementById("box").appendChild(imgtest1);
}
else {
var imgtest1= document.createElement("input");
imgtest1.src="https://s3.amazonaws.com/impressivewebs/2014-02/w3schools-logo.jpg";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)}
document.getElementById("box").appendChild(imgtest1);
}
}
function casuale(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</div>
</body>
I have a little problem with this code:
var rosso = casuale(0, 3)
if (rosso == 0) {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/badtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
error++;
checkerror();
}
document.getElementById("box").appendChild(imgtest1);
} else {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/goodtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
point++;
document.getElementById("box").removeChild(imgtest1);
if (point == maxp) {
livello2(7);
cleartarget();
}
}
document.getElementById("box").appendChild(imgtest1);
}
wheni try to remove the child "imgtest1" with the goodtarget.png image i have no problems, instead when i want to remove the child with the badtarget.png image the button stay here and there is no way to remove it. Why this happens? there is a way to solve this? if needed i can post other lines of code.
Thanks
Edit: Sorry for wasting your time, in the snippet the code works as intended (both the green and the blue images can disappear) but in my program can not.
the lines of code that i use for the remove child is a function that should be called at the end of a level:
var myNode = document.getElementById("box");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
this function cant remove the objects created with the "imgtest1.src = "graphic/badtarget.png";"
Thanks for your time
<span id='amount'>0.00000000</span>
<a class='button-withdraw' id='tombolco' href='#'>Checkout</a>
<script>
var amount = document.getElementById("amount").innerHTML;
if (amount >= 0.001) {
document.GetElementById("tombolco").style = "display:block";
} else {
document.GetElementById("tombolco").style = "display:none";
}
</script>
Why doesn't my code work? What's wrong with it and how can I solve it?
document.GetElementById("tombolco").style = "display:block";
That's not the right way. This is
document.getElementById("tombolco").style.display = 'block';
Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine.
Fiddle
<script>
var amount = document.getElementById("amount").innerHTML;
if (amount >= 0.001) {
document.getElementById("tombolco").style.display = 'block';
} else {
document.getElementById("tombolco").style.display = 'none;
}
</script>
If you want to assign a CSS string to the element, as you are trying to do, use style.cssText:
document.getElementById("tombolco").style.cssText = "display:block";
When I use document.getElementById('checkbox1').checked == true in IE8 it does not work but works in IE7, any solutions please?
<script language="Javascript" type="text/javascript">
function swap(){
if(document.getElementById('checkbox1').checked == true ){
document.getElementById('captionrow1').style.display = "none";
document.getElementById('captionrow2').style.display = "inline";
document.getElementById('show').style.display = "inline";
if (location.href.indexOf("CheckBox1=1") == -1)
location.href = "employees_commends1a.asp?CheckBox1=1";
}
if(document.getElementById('checkbox1').checked == false ){
document.getElementById('captionrow1').style.display = "inline";
document.getElementById('captionrow2').style.display = "none";
document.getElementById('show').style.display = "none";
}
}
</script>
Make sure the checkbox has a unique ID Also your code changes the location = unloads the page - I am sure that is what makes your code not work.
I suggest this instead:
window.onload=function() {
var chk = document.getElementById('checkbox1');
chk.checked=location.href.indexOf("CheckBox1=1") != -1
chk.onclick=function() {
location = "employees_commends1a.asp?"+(this.checked?"CheckBox1=1":"CheckBox1=0");
}
swap();
}
function swap(){
var checked = document.getElementById('checkbox1').checked;
document.getElementById('captionrow1').style.display = (checked)?"none":"inline";
document.getElementById('captionrow2').style.display = (checked)?"inline":"none";
document.getElementById('show').style.display = (checked)?"inline":"none";
}
<input type="checkbox" id="checkbox1" />