<button class="btn" onclick="func(0)" value="">abc</button>
<button class="btn" onclick="func(1)" value="">def</button>
<button class="btn" onclick="func(2)" value="">ghi</button>
<script type="text/javascript">
function func(i){
var btn= document.getElementsByClassName("btn")[i];
console.log(btn);
btn.style.color="red";
}
</script>
I want to add new button every time, and want to display them on top. For adding them on top i need to change numbering till end
any solution to this. How new button[i] can be displayed on top
Subtract from the number of buttons to count from the end.
function func(i) {
var all_buttons = document.getElementsByClassName("btn");
all_buttons[all_buttons.length - i - 1].style.color = "red";
}
<button class="btn" onclick="func(2)" value="">abc</button>
<button class="btn" onclick="func(1)" value="">def</button>
<button class="btn" onclick="func(0)" value="">ghi</button>
Related
Hello I am trying to do an Assessment where I need to be able to use the Local Storage in JavaScript.
I am very new to this but I cannot get my click counter to save. This is just a simple short game with text nodes but I am trying have a lifetime click counter, what am I doing wrong?
Also sorry if this is messy, this is my first application. This is also my first post so I hope this makes sense
JS
const lifetimeClicker = localStorage.getItem('counter')
var button = document.getElementById("counter"),
count = 0;
document.getElementById('option-buttons').onclick = function(Counter) {
count += 1;
button.innerHTML = + count;
};
function saveToLocalStorage () {
localStorage.setItem('lifetimeClicker', counter)
}
document.getElementById('saveButton').onclick = saveToLocalStorage
HTML
<body>
<div class="textButtons">
<div id="textSize">Text Size</div>
<button class="btn" onclick="document.getElementById('text').style.fontSize = '1.0em'">S</button>
<button class="btn" onclick="document.getElementById('text').style.fontSize = '1.5em'">M</button>
<button class="btn" onclick="document.getElementById('text').style.fontSize = '2.0em'">L</button>
<div class="main">
<div class="main">
<h3>Lifetime Clicks</h3>
<p id="counter">0</p>
<button id="saveButton">Save</button>
</div>
</div>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn" onclick="'clicks = clicks++'">Option 1</button>
<button class="btn" onclick="'clicks = clicks++'">Option 2</button>
<button class="btn" onclick="'clicks = clicks++'">Option 3</button>
<button class="btn" onclick="'clicks = clicks++'">Option 4</button>
<button class="btn" onclick="'clicks = clicks++'">Option 5</button>
</div>
</div>
</body>
The Option Buttons carryout out the next text and options for the next scene.
At the moment each time I click an option-button it goes to the next textnodes and the counter increments +1This is what it all looks like together
You are getting an item with the reference of counter in Local Storage, but when you are setting it, you set to lifetimeClicker. Change the first line of your code to:
const lifetimeClicker = localStorage.getItem('lifetimeClicker')
Or, inside saveToLocalStorage, use counter as the first argument of localStorage.setItem
Try the below:
//We are using the key "current-count" to identify the value we need (you can name this anything)
//Values in storage must always be strings
const countData = localStorage.getItem("current-count")
const savedData = JSON.parse(countData);
localStorage.setItem("current-count", JSON.stringify(counter));
Here is my code:
<html>
<body>
<script>
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
</body>
</html>
I'm trying to use this example I found:
<body>
<h1>Single click JS Button</h1>
<button type="submit" onClick="this.disabled = true; return true;">Submit</button>
</body>
I'm confused on how to use the onClick="this.disabled = true; part because for my code I already have the function called when I wrote onClick. I used onClick="clickMe().
Are you allowed to have onClick twice? I want to use the onClick="this.disabled = true; because I don't want to keep increasing the amount of clicks if the user clicks the button again. If they click it once I only want to increment once and then disable the button or just not increase the count after.
Note on possible duplicate
I do not think this is a duplicate of the other question, as that is jQuery click() only once, but I'm using JavaScript. I have not learned jQuery (jQuery click() only once)*
Please take a look here:
var clicks = 0;
function clickME(el) {
el.disabled = true;
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
addEventListener option once:true - looks like a perfect option in your case.
More explanations in the code
var clicks = 0
function clickME(event) {
clicks += 1
document.getElementById("clicks").innerText = clicks // innerText is more suitable in this case
if (event.target.className.includes(`auto-disable`)) {
event.target.disabled = true // auto disabling if you need it
}
}
document.querySelectorAll(`button`) // select all buttons
.forEach( // loop through the elements
// addEventListener with options once:true. once option designed exactly for your purposes, to fire event only once
el => el.addEventListener(`click`, clickME, {once: true})
)
<p>Clicks: <a id="clicks">0</a></p>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button" class="auto-disable">Click me</button>
<button type="button" class="auto-disable">Click me</button>
I want to create these buttons:
<!DOCTYPE html>
<html>
<body>
<button type="button">Linear algebra </button>
<button type="button">Calculus I </button>
<button type="button">Basic Mechanics </button>
<button type="button">Mechanics1 </button>
<button type="button">Mechanics2 </button>
<button type="button">Mechanics3 </button>
<button type="button">Mechanics4 </button>
<button type="button">Mechanics5 </button>
</body>
</html>
And I was wondering if there is an option to do it with a function for when the list is even longer.
My idea is to create the following list:
var subjects=["Linear algebra","Calculus I","Basic Mechanics","Mechanics1","Mechanics2","Mechanics3","Mechanics4","Mechanics4"]
And iterate it with a for loop and then create the button with the result of every element in the list. Is this possible?
You can use Array forEach to iterate through the array, use createElement to create the buttons and appendChild to append them to the DOM where needed.
var subjects=["Linear algebra","Calculus I","Basic Mechanics","Mechanics1","Mechanics2","Mechanics3","Mechanics4","Mechanics4"]
subjects.forEach(function(item){
var button = document.createElement('button');
button.type = 'button';
button.innerHTML = item;
document.body.appendChild(button);
})
I have a number of buttons within a section, each with an id of the form #balls-left-n, where n ranges from 1 to 15.
When one of these buttons is clicked, I want to grab the number from the id that was clicked and hide all of the buttons with ids that have names including numbers that are greater than the one clicked on.
So, if #balls-left-13 is clicked, I want to hide #balls-left-14 and #balls-left-15. But if #balls-left-3 is clicked I want to hide all the buttons from #balls-left-4 through #balls-left-15.
I'm a novice at web-dev so if I've made other mistakes or taken a poor approach don't hesitate to point that out.
I have a handler for each of the buttons (which if I knew more could probably be one function) that look like this:
$("#balls-left-14").click(function() {
var num_balls = $(this).attr('id').match(/[\d]/);
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
This didn't work and I get an error that num_balls is undefined, which I don't understand.
#balls-left is the section all of the buttons are inside of.
relevant HTML as requested
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
Hope this helps.
var exploded = id.split("-");
alert(exploded.pop());
Now, to use that concept on your HTML structure, you can do something like this:
$(document).ready(function() {
$(".x-balls-left").click(function(e) {
e.preventDefault();
var exploded = this.id.split("-");
alert(exploded.pop());
});
});
And here's a Fiddle you can play around with.
You might don't even need all of these if your elements to hide share the same parent. Just set class on click .selected and hide the rest using CSS .selected.x-balls-left ~ .x-balls-left {display: none;}
$('.x-balls-left').click(function() {
$(this).toggleClass('selected');
})
.selected.x-balls-left ~ .x-balls-left {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
$(document).on('click', '.balls-left', function() {
var num = getNum(this);
$('.balls-left').each(function() {
var that = $(this);
var bnum = getNum(that);
if (bnum > num) {
that.show();
} else {
that.hide();
}
});
});
var getNum = function(elem) {
if (elem) {
return $(elem).attr('id').replace('balls-left-', '');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="balls-left-1" class="balls-left">Ball 1</div>
<div id="balls-left-2" class="balls-left">Ball 2</div>
<div id="balls-left-3" class="balls-left">Ball 3</div>
<div id="balls-left-4" class="balls-left">Ball 4</div>
<div id="balls-left-5" class="balls-left">Ball 5</div>
$("#balls-left button:gt(num_balls-2)").hide;
This is an invalid CSS selector, and only gets the hide method, without calling it. You want something like:
$("#balls-left button:gt("+(num_balls-2)+")").hide();
First you should put a class on each object so you can reference them all at once, and the simplest way to understand is to just put the ball number right in the tag as a custom attribute if you can:
<input type="button" id="balls-left-1" class="left-ball" num="1"/>
<input type="button" id="balls-left-2" class="left-ball" num="2"/>
etc...
Then you can write the javascript as follows:
$('.left-ball').click(function () {
var BallNum = $(this).attr('num');
$('.left-ball').each(function () {
if ($(this).attr('num') > BallNum) {
$(this).hide();
}
});
});
You can use RegEx match like this. This might resolve your undefined num_balls error message.
$("#balls-left-14").click(function() {
var ret = $(this).attr('id').match("[0-9]+");
var num_balls = ret[0];
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
Another way of doing it using your original HTML:
$('.x-balls-left').click(function () {
var BallNum = $(this)[0].innerHTML;
$('.x-balls-left').each(function () {
if ($(this)[0].innerHTML > BallNum) {
$(this).hide();
}
});
});
I just did it like this:
$('button[id^=balls-left-]').click(function(){
var num_balls = $(this).attr('id').match(/[\d]/);
$('#balls-left button:gt(' + num_balls + ')').hide();
});
Keep in mind that :gt select by index, it means that $('#balls-left button:gt(2)') will not select the button with id balls-left-2 but the one with id balls-left-4 (according to the html you posted).
I have ten buttons with a button for next and previous,
when I click the next button, it should show the next two buttons (hiding the rest).
The reverse should happen when the previous button is clicked (Show the previous two buttons (hide the rest)).
thanks.
my html code is :
<div>
<button class="menu">M1</button>
<button class="menu">M2</button>
<button class="menu">M3</button>
<button class="menu">M4</button>
<button class="menu">M5</button>
<button class="menu">M6</button>
<button class="menu">M7</button>
<button class="menu">M8</button>
<button class="menu">M9</button>
<button class="menu">M10</button>
</div>
<div>
<button class="action" id="btnNext">Next</button>
<button class="action" id="btnPreview">Previous</button>
</div>
Initially make every button hidden except first two.
$("#btnNext").on('click', function(){
var vBtn = $(".menu:visible:last");
$(".menu").hide();
vBtn.next().show();
vBtn.next().next().show();
});
$("#btnPreview").on('click', function(){
var vBtn = $(".menu:visible:first");
$(".menu").hide();
vBtn.prev().show();
vBtn.prev().prev().show();
});
I manually coded not tested please check
$("button.menu").not(':eq(0),:eq(1)').hide();
var count = 1;
$("#btnNext").click(function() {
$("button.menu").hide();
count = count + 2;
$("button.menu").eq(count-1).show();
$("button.menu").eq(count).show();
});
$("#btnPreview").click(function() {
$("button.menu").hide();
count = count - 2;
$("button.menu").eq(count-1).show();
$("button.menu").eq(count).show();
});