I've added comments at the middle of the code. Please help me If you can, I have to deliver the product today.
if (a === 3) { //this would be how many of the answers further the action
var starting = 2; // for an example: yes or no; two of the answers go to no, one goes to yes.
// we take 2 as a starting point /you can set these individually for each scenario;
if (starting === 2) {
for (i = 0; i < starting; i++) {
answers[i] = 1; //sets the two checking points of the answer to the no, remaining yes;
document.getElementById("btn" + i).style.backgroundColor = "red";
// the problem lies here
// I tried multiple ways but none of them worked so far
//i want to apply the style change to multiple buttons at once.
}
alert(answers);
for (i = 0; i < starting; i++) {
if (answers[i] == 1) {
}
}
}
}
The problem is that the name of the button which is btn and the buttons are named as btn1, btn2,btn3; I want the for loop to change it to all of the buttons, however the string literal at the id doesn't recognize the i;
Example: "btn" + i; = change the style of the btn1
I fixed it guys. The mistake was that the for loop starts at 1;
And I have named the id of the buttons wrong. Novice mistake! :)
for (i = 0; i < 3; i++) {
if (document.getElementById("btn" + i) != undefined)
document.getElementById("btn" + i).style.backgroundColor = "red";
}
<input type="button" value="Submit" id="btn3">
<input type="button" value="Submit" id="btn1">
<input type="button" value="Submit" id="btn2">
The problem is your button id starts from btn1 and your code starts from 0 which is not located in your html so either add a check before setting background color or start your loop from 1
if (document.getElementById("btn" + i) != undefined)
Related
Basic html:
<button id="changer">Changer button</button>
<div id="text"> </div>
"Changer" is the button element in html, "text" is the div tag in which our text will be placed.
var selector = 0;
We set the selector to 0. Next, every time the button "changer" is clicked, we add 1 to the selector var, unless it has reached its max value of 14, in which case we start over. And based on the selector value, we pick from the available text values.
document.getElementById("Changer").onclick = function () {
if (selector < 14) {
selector++;
}
else {
selector = 0;
selector++;
}
document.getElementById("text").innerHTML = text;
}
if (selector = 1 ){
text = "<p>this is text 1</p>";
if (selector = 2 ){
text = "<p>this is text 2</p>";
etc...
The problem is, the function upon being clicked jumps right to the last text value available. How do I fix this? Will add live example soon if needed.
Your are assigning the selector inside the if condition to a value.
if(selector = 1) {...
What you actually want to do is check if the selectors value is equal to something like so:
if(selector == 1) {...
But you do not need to repeat the check, you can simply do:
var selector = 0;
var btn = document.getElementById('changer');
var output = document.getElementById('text');
btn.addEventListener('click', function() {
if (selector < 14) {
selector++;
output.innerHTML = "<p>this is text " + selector + "</p>";
} else {
selector = 0;
output.innerHTML = "";
}
})
<button id="changer">Changer button</button>
<div id="text"> </div>
Hello I have a bunch of dynamically created div boxes with IDs div1-div999.
I then grab random boxes and change the animation name to "grow". I want to also change the playstate to "running" but as I have it now just randomly selects another group to change the play states for.
else if (e.keyCode == '40') {
for(var i = 0;i <400; i++){
document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationName = "Grow";
document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationPlayState = "running";
}
}
I would like to change the animation name and play state of just one group selection. Something like:
document.getElementById("div"+Math.floor((Math.random()*1000) + 1 )).style.animationName = "Grow" / style.animationPlayState = "running";
Is there any way to do this?
Thanks!
How about storing that random group of div ID's inside an array? Hope this helps.
else if (e.keyCode == '40') {
for(var i = 0;i <400; i++){
var randomSelection=[]; //a new array to store all ID's
randomSelection[i]=Math.floor((Math.random()*1000) + 1))
document.getElementById("div"+randomSelection[i].style.animationName = "Grow";
document.getElementById("div"+randomSelection[i].style.animationPlayState = "running";
}
}
Hi I'm trying to make a step by step instruction and I want the effect to be like when the user clicks on the button which will have the word STEP 1 inside the button the text inside a p element will change to the details on step 1. After that the same button will have the words inside the button changed into STEP 2 and when clicked will change the same p elements contents to step 2 instructions is this possible with javascrpt, jQuery or php??
You may do it in various ways. You may use jquery or plain javascript. I would suggest the following logic:
1) You initialize button with first step label and some variable that tracks your steps (e.g. var step = 1 initial)
<button>Step <span>1</span><button>
2) On click you increment variable, get the span in the button and update its content with that variable.
Here is fiddle
You could try using a simple function to do this
<!-- this is the Details Div -->
<div id="stepDetails"> Step Details Here </div>
<!-- here is your button that changes with onClick binding -->
<button id="stepButton" onClick="next_step()"> Step 1 </div>
<script>
/* global arrray with details */
var step_details = ["Intro Details", "Step 1 Details", "Step 2 Details"];
/* global variable to track position in array */
var current_step = 0;
/* function to be called from onClick binding */
function next_step() {
current_step++; /* increase the step variable */
document.getElementById("stepDetails").innerHTML = step_details[current_step];
document.getElementById("stepButton").innerHTML = "Step " + (current_step + 1);
}
</script>
Edit: added some comments to help explain the code better
Yes you can create it with js or jquery(maybe it's better). You can use simply the basis functions like <...onlick="yourfunction()"> to change for the STEPS
'<script type="text/javascript">
function youfunction(){
document.getElementById("p").innnerHTML = 'myDetails';
.....
}</script>
just to increase array index :
<body>
<div id="div">sample text</div>
<button id="button" onClick="next_step()"> Step 1 </div>
<script>
let arr = ["step 1", "step 2", "step 3" , "sample text" ];
let count = 0; // step
function next_step() {
if (count < 5) document.getElementById("div").innerHTML = arr[count];
count++;
if (count == 4) count = 0; // use 3 for stoping function on the last element
}
</script>
</body>
and if you wana make increase and decrease together , you can use somthing like this :
"use strict";
let arr = ["index0", "index1", "index2", "index3", "index4"];
let count = 0;
document.getElementById("div").innerHTML = arr[0];
function getup() {
if (count < arr.length) count++;
if (count === arr.length) count = 0;
document.getElementById("div").innerHTML = arr[count];
}
function getdown() {
if (count >= 0) count--;
if (count === -1) count = arr.length - 1;
document.getElementById("div").innerHTML = arr[count];
}
<div id = "div"></div>
<button onclick = "getup()">up</button>
<button onclick= "getdown()">down</button>
I wrote a JavaScript function that takes the current number of spans of the class mini in the paragraph element with an id mega, which is at least 1, and if there are less than 4, adds enough to make 4. If there was no second mini, then the second mini, which the function should create, should say 2nd, if a third one is created, it should say 3rd, and if a fourth is created, it should say 4th. For example, if there are already 2 mini spans, the program, should add 2 more, the first one added saying 3rd and the second one saying 4rd. Here's the code:
function addSpans(currentNumOfSpans)
{
var mega = document.getElementById("mega");
var mini = document.createElement("span");
mini.className = "mini";
if (currentNumOfSpans < 4)
{
if (currentNumOfSpans < 3)
{
if (currentNumOfSpans < 2)
{
mini.innerHTML = "2<sup>nd</sup>;
mega.appendChild(mini);
}
mini.innerHTML = "3<sup>rd</sup>;
mega.appendChild(mini);
}
mini.innerHTML = "4<sup>th</sup>;
mega.appendChild(mini);
}
}
Soooo.... If currentNumOfSpans is 3, it works fine, and adds 4th to mega. However, if currentNumOfSpans is 1 or 2, while it should add 2nd3rd4th or 3rd4th, respectively, it just adds 4th. Can someone help me figure out what's wrong with this. Any help's appreciated, thanks!
Note: If you notice any typos, please comment or edit, but they aren't the problem, I've checked over my code in a syntax checker, but I often make errors in my code on SO because I use a tiny phone keyboard. So basically, typo's, whichI probably made, aren't the real problem. Thanks!
Your example included a few typos, most of which could be found by running your code through a debugger, like http://jshint.com.
However, I would use a more functional approach. The following method is not hard coded like yours, so you could use it for multiple elements, or use a different number of spans with very minimal changes to the usage, I've shown this in the demo below.
function getSuffix(i) {
var j = i % 10, k = i % 100;
if (j == 1 && k != 11) return i + "<sup>st</sup>";
if (j == 2 && k != 12) return i + "<sup>nd</sup>";
if (j == 3 && k != 13) return i + "<sup>rd</sup>";
return i + "<sup>th</sup>";
}
function addSpans(scope, length) {
var spans = scope.querySelectorAll('.mini');
var current = length - (length - spans.length);
while(current < length) {
var span = document.createElement('span');
span.className = 'mini';
span.innerHTML = getSuffix(++current);
scope.appendChild(span);
}
}
var wrap = document.querySelector('.wrap'), divs;
var clone = wrap.cloneNode(true);
wrap.parentNode.appendChild(clone);
divs = wrap.querySelectorAll('.mega');
for(var i in Object.keys(divs)) addSpans(divs[i], 4);
divs = clone.querySelectorAll('.mega');
for(var i in Object.keys(divs)) addSpans(divs[i], 6 + (i * 2));
.mega { font-size: 0; } .mini { display: inline-block; width: 40px; font-size: 16px; }
<div class="wrap">
<div class="mega"></div>
<div class="mega"><span class="mini">1<sup>st</sup></span></div>
<div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span></div>
<div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span></div>
<div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span><span class="mini">4<sup>th</sup></span></div>
</div>
I have a small requirement. I have a div with three child divs with text. On load the first text will be visible. After 3 seconds the first one hides and second one is visible. After another 3 seconds the second one hides and third one is visible. This continues.
Currently I do not have any animation on the hide of one span and show of another. So it looks kind of murky. White I want is to show some kind of animation as it happens on the windows 8 tiles. Like the text that hides should slide up and disappear and the text that is to be shown should slide in from bottom. the animation should give the user a smooth experience.
I am not using any animation library. Is this possible through javascript / css ? Below is my code. Any idea would be useful.
HTML :
<div class="dataflipping">
<div class="first">FIRST TEXT</div>
<div class="second">SECOND TEXT</div>
<div class="third">THIRD TEXT</div>
</div>
JavaScript:
var srcElement = document.getElementsByClassName("dataflipping");
var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];
for (counter === 0; counter < elementChld.length; counter++) {
elementArr.push(elementChld[counter]);
}
var elementCount = elementArray.length;
// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
var ele = elementArray[counter];
ele.style.display = "none";
}
counter = 0;
setInterval(function () {
counter++;
var prevElement = null;
var curElement = null;
if (counter === 1) {
var prevElement = elementArr[elementCount - 1];
}
else {
prevElement = elementArr[counter - 2];
}
curElement = elementArr[counter - 1];
prevElement.style.display = "none";
curElement.style.display = "block";
if (counter === elementCount) {
counter = 0;
}
}, 3000);
Girija
IF I understood well. I think easier way is to use MODULO, I wrote something like this:
elementArr[counter%elementCount]
http://jsfiddle.net/t3N4A/
I think you just need to try make position:absolute; and like i change opacity you should change it left/top position, change frequency of setInterval function to make it smoother and make it disappear where u want to. Hope that helped a little.