EDIT
I meant to say, how could I add a third else if statement that would fire on the third click.
basically it opens and hide a different element on the first, second and third click.
so I want to add one more function to make a total of 3 functions to this onclick event that changes depending on how many times you click on the button. I am just not sure how to add a third function.
<div class="base" id="base">
<img src="img/base.svg">
</div>
<div class="base one" id="one">
<img src="img/one.svg">
</div>
<div class="base two" id="two">
<img src="img/two.svg">
</div>
<div class="base three" id="three">
<img src="img/three.svg">
</div>
<button class="test" id="test">btn</button>
var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else {
one.style.display = "none";
two.style.display = "block";
action = 1;
}
}
You already have the basic setup, you just need to extend it:
var action = 1;
test.onclick = function viewSomething() {
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else if (action === 2) {
// ...
action = 3;
} else if (action === 3) {
one.style.display = "none";
two.style.display = "block";
action = 1;
}
Having said that, if you always go sequentially from one "action" to the other, you could consider moving each "action" into a separate function, storing all those functions into an array and have the click handler simply advance the index:
const actions = [
function(event) {
base.style.display = "none";
one.style.display = "block";
},
function(event) {
one.style.display = "none";
two.style.display = "block";
},
function(event) {
// ...
},
];
let actionIndex = 0;
test.onclick = function viewSomething(event) {
actions[actionIndex](event);
actionIndex = (actionIndex + 1) % actions.length;
};
The advantage of the solution is that you are decoupling the action "control" from the actions themselves and that you can more easily add and rearrange additional actions.
I'm not sure what you mean by a third function since I can only see viewSomething, but you can add an if else block to your if statement:
if (action == 1) {
base.style.display = "none";
one.style.display = "block";
action = 2;
console.log(tets)
} else if (this == that) {
// your logic here
} else {
one.style.display = "none";
two.style.display = "block";
action = 1;
}
If you really want three different functions (you currently have one function and two if statements), you need to use addEventListener:
function clickOne() {
console.log("first!");
}
function clickTwo() {
console.log("second!");
}
function clickThree() {
console.log("third!");
}
var test = document.querySelector("#test");
test.addEventListener("click", clickOne);
setTimeout(() => {
test.addEventListener("click", clickTwo);
}, 2000);
setTimeout(() => {
test.addEventListener("click", clickThree);
}, 5000);
<button class="test" id="test">Click</button>
Related
I'm trying to have multiple buttons which each have an individual call function, but either all the buttons do the same thing or none of them work at all.
So this is my first button:
<button id="study" onclick="call();">Study</button>
And this is its script:
var callCount = 0;
function one() {
changeImage1('Call one');
{
var img = document.getElementById("image");
img.src="images/tumblr_dash.gif";
document.getElementById("action").innerHTML = "You have decided to study";
}
}
function two() {
changeImage2('Call two');
{
var img = document.getElementById("image");
img.src="images/tumblr_dash.gif";
document.getElementById("action").innerHTML = "You have decided to start studying in a minute";
}
}
function three() {
changeImage3('Call three');
{
var img = document.getElementById("image");
img.src="images/study.gif";
document.getElementById("action").innerHTML = "You are currently studying";
}
}
function call(){
callCount++;
var btn = document.getElementById('study');
if(callCount == 1) one();
else if(callCount == 2) two();
else if(callCount == 3) three();
else btn.disabled = true;
//callOne = false /*!callOne;*/
}
And that works fine. But when I put in my second button:
<button id="eat" onclick="call1();">Eat</button>
Which has this script:
var callCount1 = 0;
function one1() {
changeImage1('Call one');
{
var img = document.getElementById("image");
img.src="images/tumblr_dash.gif";
document.getElementById("action").innerHTML = "You have decided to study";
}
}
function two1() {
changeImage2('Call two');
{
var img = document.getElementById("image");
img.src="images/tumblr_dash.gif";
document.getElementById("action").innerHTML = "You have decided to start eating in a minute";
}
}
function three1() {
changeImage3('Call three');
{
var img = document.getElementById("image");
img.src="images/eat.gif";
document.getElementById("action").innerHTML = "You are currently eating";
}
}
function call1(){
callCount1++;
var btn = document.getElementById('eat');
if(callCount1 == 1) one();
else if(callCount1 == 2) two();
else if(callCount1 == 3) three();
else btn.disabled = true;
//callOne = false /*!callOne;*/
}
It performs the same functions as the first button, instead of doing what I'm asking it to. I've tried changing the numbers of the ChangeImage function but it does nothingHow do I fix this?
Function call1() calls one() two() and three() instead of one1() two1() and three1(). That may be the problem.
I am currently working on a project that is showing and displaying DOM elements based on a countdown timer. There is another function calling this one every second.
Here is a code sample:
function eventsOnTimer() {
let x = 1;
const interval = setInterval(() => {
if (x >= 0.0 && x < 30.0) {
document.getElementById('thing1').style.display = 'block';
document.getElementById('thing2').style.display = 'none';
}
else if (x >= 30.0 && x < 60.0) {
document.getElementById('thing1').style.display = 'none';
document.getElementById('thing2').style.display = 'block';
}
x++;
}, 1000);
}
I'm trying to increase performance, and I'm doing this by trying to reduce the number of DOM requests and looking at alternative ways to fire code based on the countdown timer.
Something like
function eventsOnTimer(id1, id2, ms) {
let toggle = false, thing1 = document.getElementById(id1), thing2 = document.getElementById(id2);
const interval = setInterval(() => {
if(toggle){
thing1.style.display = 'block';
thing2.style.display = 'none';
} else{
thing1.style.display = 'none';
thing2.style.display = 'block';
}
toggle = !toggle;
}, ms);
}
eventsOnTimer('thing1', 'thing2', 30000);
You can store all of nodes references before run your timer to dicrease DOM access time (getElementById).
After that, using className instead of style property will be faster. You juste need declared an specific CSS rule per state.
I propose to you an generic function to set automatically all of your nodes with the same CSS class name.
JS
var nodeArray = [];
var max_node = 2;
function storeNodeRef() {
for(var i =1; i <= max_node; i++) {
nodeArray.push( document.getElementById("thing"+i)); // Your nodes are declared with ID thing"X". "X" is a numeric value, set "max_node" with the latest "X" value.
}
eventsOnTimer();
}
function setNodeClass(nodeClassName) {
var i = 0;
while(i < max_node) {
nodeArray[i++].className = nodeClassName;
}
}
function eventsOnTimer() {
let x = 1;
const interval = setInterval(() => {
if (x==30 || x == 60) { // declare here your different state, you can use multiple if/elseif or multiple switch case.
setNodeClass('hide myClass'+x); // Param : new className
}
x++;
}, 1000);
}
storeNodeRef();
CSS
.process > div, .hide {display:none;}
#thing2.myClass30, #thing1.myClass60, .process > div.show {display:block; }
HTML EXAMPLE
<div class="process">
<div id="thing1" class="show" >Hello World 1</div>
<div id="thing2">Hello World 2</div>
</div>
I am trying to create a kind of box which suppose to display random divs. For example with fun facts about animals. I found some code, wrote some on my own and it works this way:
1. random div is loaded when page is loading
2. next random divs are loaded everytime user click the button: "Random fun facts"
In the code below the button "Rundom fun facts" works only once. How can I make it to work continousely? I mean the way that I can click on it 100 times and it will display 100 various divs. And here is my second question: When using for example 100 divs (there are many fun facts about animals) the code below would be very long, is there a simpler way with some kind of creating a loop?
There are tons of sliders but I couldn't find anything like I need. Any help would be appreciated.
<div id="box">
<div id="funfact1">
<p>
Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns. </p>
</div><!-- end funfact1 -->
<div id="funfact2">
<p>Macaques in Japan use coins to buy vending machine snacks. </p>
</div><!-- end funfact2 -->
<div id="funfact3">
<p>Japanese Macaques make snowballs for fun. </p>
</div><!-- end funfact3 -->
<div id="funfact4">
<p>Dogs’ nose prints are as unique as human fingerprints and can be used to identify them. </p>
</div><!--end funfact4 -->
<div id="buttonDiv">
<button id="buttonShuffle">Random fun fact</button>
</div><!-- end buttonDiv -->
</div><!-- end div box -->
<script type="text/javascript">
randomNumber = Math.floor(Math.random()*4+1);
window.onload = function() {
if (randomNumber == 1) {
document.getElementById("funfact1").style.display = "inline";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber == 2) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "inline";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber == 3) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "inline";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber == 4) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "inline";
}
}
randomNumber1 = Math.floor(Math.random()*4+1);
document.getElementById("buttonShuffle").onclick=function() {
if (randomNumber1 == 1) {
document.getElementById("funfact1").style.display = "inline";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber1 == 2) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "inline";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber1 == 3) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "inline";
document.getElementById("funfact4").style.display = "none";
}
if (randomNumber1 == 4) {
document.getElementById("funfact1").style.display = "none";
document.getElementById("funfact2").style.display = "none";
document.getElementById("funfact3").style.display = "none";
document.getElementById("funfact4").style.display = "inline";
}
}
</script>
Fiddle
If you want to keep all your div and write a less repetitive code, you can try this. In general, when you write code, try to identify repetitions and export their in functions.
window.onload = function() {
// show random fact on load
randomFact()
// show random fact on button click
document.getElementById("buttonShuffle").addEventListener('click', randomFact)
}
function randomFact () {
// generate random
var random = Math.floor(Math.random() * 4)
// get all facts
var funfacts = document.getElementsByClassName('funfact')
// hide all facts
for (var i = 0; i < funfacts.length; i++) {
funfacts[i].style.display = 'none'
}
// show one
funfacts[random].style.display = 'inline'
}
https://jsfiddle.net/kxv7y6x9/
Try this :
<div id="box">
<p id="funFacts"></p>
</div><!-- end div box -->
<script type="text/javascript">
var funFacts = [
'Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns. ',
'Macaques in Japan use coins to buy vending machine snacks. ' ,
'Japanese Macaques make snowballs for fun. ' ];
var randomNumber = Math.floor(Math.random() * (funFacts.length-1));
window.onload = function() {
document.getElementById('funFact').innerHTML = funFacts[randomNumber];
};
document.getElementById("buttonShuffle").onclick=function() {
var randomNumber1 = Math.floor(Math.random() * (funFacts.length-1));
document.getElementById('funFact').innerHTML = funFacts[randomNumber1];
}
</script>
What problem you are facing is that you are generating randomNumber1 outside the function which is running only once and not on each call of buttonShuffle.
Next problem you had was to not write some many divs which you can see that I have solved using an array of funfacts.
This will fix your problem,
And if you want to dynamic the posts count you can do something like this,
HTML,
<div id="box">
<div class="text">
<p>Squirrels plant thousands of new trees each year simply by forgetting where they put their acorns</p>
</div><!-- end funfact1 -->
<div class="text">
<p>Macaques in Japan use coins to buy vending machine snacks.</p>
</div><!-- end funfact2 -->
<div class="text">
<p>Japanese Macaques make snowballs for fun.</p>
</div><!-- end funfact3 -->
<div class="text">
<p>Dogs’ nose prints are as unique as human fingerprints and can be used to identify them. </p>
</div><!--end funfact4 -->
<div id="buttonDiv">
<button id="buttonShuffle">Random fun fact</button>
</div><!-- end buttonDiv -->
</div><!-- end div box -->
Javascript,
var texts = document.getElementsByClassName('text'),
randomNumber;
function updateNumber(){
randomNumber = (Math.floor((Math.random() * texts.length) + 1)) - 1;
}
function updateText(){
updateNumber();
for (i = 0; i < texts.length; i++) {
texts[i].style.display = "none";
}
texts[randomNumber].style.display = "block";
}
window.onload = function(){
updateText();
}
document.getElementById('buttonShuffle').onclick = function(){
updateText();
}
CSS,
#box {
width: 350px;
height: 250px;
border: solid thin blue;
padding: 10px;
position: relative;
}
#buttonDiv {
position: absolute;
bottom: 10px;
left: 120px;
}
See the example: https://jsfiddle.net/xbouf1o2/21/
In the code below the button "Random fun facts" works only once. How can I make >it to work continuously?
The reason this happens is because your randomNumber1 variable is calculated once. You need to calculate your random number within the onclick event. This way, every time you click the button, a random number is generated, and the associated fun fact is displayed.
When using for example 100 divs (there are many fun facts about animals) the >code below would be very long, is there a simpler way with some kind of >creating a loop?
First, you need to remove the ID from each fun fact, and add a class instead. Now you can use JS to grab all fun facts using document.getElementsByClassName(class). This will return a nodelist that we can loop through.
Second, create a function which will do the shuffling for you.
function shuffleRandomFunfact(event) {
// Generate a random number.
var randomNumber = Math.floor(Math.random() * 4);
// Loop through the nodelist.
for (var i = 0; i < funfacts.length; i++) {
// If the index of the current funfact is the same
// as the random number.
if (i === randomNumber)
funfacts[i].style.display = 'inline';
// Otherwise ...
funfacts[i].style.display = 'none';
}
}
Now, you just need to attach the above function to your event listeners.
Fiddle
I've got an HTML/jQuery Mobile project and I have a dialogue box with a 'create button'. When the 'create button' is pressed I need it to go back to previous page (however it can't access the previous page because the VisualStudio won't let me redirect to a page not in the same folder as my dialogue?) So two questions really, the first is how can I redirect to previous page through this button click. It works like this, you start off on a page and click new profile to create a new profile, once Create is clicked on the dialogue it needs to go back to the main page with new methods, which brings me to the second question.
The button accesses two methods which are checkNewUser(); and toggle(); checkNewUser is basically validation in the form and toggle is to make some DIVs appear and disappear when redirected back to the original page. My main question is how do I get the submit button to do the checkNewUser method first, and if the credentials entered are valid then do the toggle method and redirect to my main page, I hope this makes sense and I don't get down voted into oblivion :-)
<a href="C:\Users\A569417\Documents\AppsMaintenance\UI\Privileges.html" önclick="checkNewUser(); toggle();" data-role="button" data-theme="b"
data-inline="true" data-mini="true" data-icon="check">Create</a>
Here is the checkNewUser method:
function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
}
else {
console.log("failed")
}
and the checkTextboxesValid method that it uses:
function checkTextboxesValid() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
var error_message = "";
// check the fields aren't empty
if (profileName == "") {
error_message = "You must enter a profile name";
} else {
$("#profilename").removeClass("ui-body-f").addClass("ui-body-a");
}
if (companyCode == "" || companyCode == "Company") {
error_message = "You must select a company code";
} else {
}
if (error_message != "") {
$("#message_table").removeClass("hide_element");
$("#login_status_message").html(error_message);
return false;
} else {
return true;
}
then finally this is the Toggled method that hides the divs. I'm not sure how I can get both methods to be used by the submit button and the toggle method only works if the validation is okay. I'm guessing I'd have to combine the two methods or maybe there's a simpler way?
var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),
toggle = function () {
if( toggled ) {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "block";
div4.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "block";
}
toggled = !toggled;
};
tried using the one answer posted but that one didn't work, the div's weren't affected in that method but I can't see why not, anyone help me out?
Since you have tagged jQUery I would consider changing getElementById to $("#..
However (embed your toggle inside your check):
function checkNewUser() {
var profileName = document.getElementById("profilename").value;
var companyCode = document.getElementById("companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
var toggled = false,
div1 = document.getElementById("OldProfile"),
div2 = document.getElementById("NewProfile"),
div3 = document.getElementById("OldProfileButtons"),
div4 = document.getElementById("NewProfileButtons"),
toggle = function () {
if( toggled ) {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "block";
div4.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
div4.style.display = "block";
}
toggled = !toggled;
};
}
else {
console.log("failed")
}
Glad I could help. I think you should use this refactored code instead:
function checkNewUser() {
var profileName = $("#profilename").value;
var companyCode = $("#companycode").value;
console.log("Attempted login with " + profileName + " and " + companyCode);
if (checkTextboxesValid()) {
var toggled = false,
div1 = $("#OldProfile"),
div2 = $("#NewProfile"),
div3 = $("#OldProfileButtons"),
div4 = $("#NewProfileButtons"),
toggle = function () {
if( toggled ) {
$(div1).css('display','block');
$(div2).css('display','none');
$(div3).css('display','block');
$(div4).css('display','none');
} else {
$(div1).css('display','none');
$(div2).css('display','block');
$(div3).css('display','none');
$(div4).css('display','block');
}
toggled = !toggled;
};
}
else {
console.log("failed")
}
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