I'm just a beginner in JavaScript and I'm having trouble what kind of function I should use.
This is what I want to do, if I click any buttons in the choices, the value of the button that I choose will be transferred to the button that no value in it and I can also delete the value that I choose in the black button. It is like playing 4pics 1word.
Here is the sample: jsfiddle
<form>
<button class="inputx" id="input1" maxlength="1">E</button>
<button class="inputx" id ="input2" maxlength="1">X</button>
<button class="inputx" id ="input3" maxlength="1"></button>
<button class="inputx" id = "input4" maxlength="1"></button>
<button class="inputx" id = "input5" maxlength="1"></button>
<button class="inputx" id = "input6" maxlength="1"></button>
<button class="inputx" id = "input7" maxlength="1"></button>
<button id="get">Check</button>
</form>
<form>
<h3>Choices</h3>
<button value ="X" maxlength="1">X</button>
<button value ="E" maxlength="1">E</button>
<button value ="M" maxlength="1">M</button>
<button value ="A" maxlength="1">A</button>
<button value ="P" maxlength="1">P</button>
<button value ="E" maxlength="1">E</button>
<button value ="L" maxlength="1">L</button>
</form>
I've updated the Fiddle with a working example.
http://jsfiddle.net/RF867/11/
The main idea is that when a .letter is clicked we want to fill the first empty .inputx with the clicked letter. And remove it once the .inputx is clicked.
$('.letter').click(function(){
$('.inputx:empty').first().html($(this).html());
return false;
});
$('.inputx').click(function(){
$(this).empty();
return false;
});
Here's a working fiddle : http://jsfiddle.net/RF867/10/
I have first add an id to the second form so i could target it easier.
Then some minor change to the validation function. By minor, i mean changing the this.value to this.innerHTML.
Then i created these 2 functions. Read the comment to understand :
$('#letters button').click(function(e){ // The new id, target buttons
e.preventDefault(); //Prevent page reload
if($('.inputx:empty:first').text($(this).val()).length) //Change the text of the first empty button. Then check if it changed something
$(this).hide(); //If it changed something, hide the button
})
$('.inputx').click(function(e){ //To remove character on click
e.preventDefault();
if($(this).is(':not(:empty)')){ //If there is text in the button
var letter = $(this).text(); //Get the letter
$('#letters button:not(:visible)').filter(function(){ //Select only visible buttons
return this.value == letter; //Check if the value is the same as the letter
}).first().show(); //There is multiple instance of the same letter (like e), select the first and show
$(this).empty(); //Remove the value of the button
}
}).not(':empty').each(function(){ //select button that has text by default
var letter = $(this).text();
$('#letters button:visible').filter(function(){
return this.value == letter;
}).first().hide(); //Hide default button
})
Check the updated fiddle. I added following function for click on the texts. I have made some changes in buttons to make the fiddle work without post request.
$('.temp').on('click',function(e){
var filled = false;
e.preventDefault();
var s = $(this).text();
$(".inputx").each(function(){
if(!filled)
{
if($(this).text() == "")
{
$(this).text(s);
filled = true;
}
}
});
});
The variable filled is boolean and is used to fill only first empty textbox. Hope this helps you.
i have made some changes and now the code works perfectly
HTML:
<div>
<button class="inputx" id="input1" maxlength="1">E</button>
<button class="inputx" id ="input2" maxlength="1">X</button>
<button class="inputx" id ="input3" maxlength="1"></button>
<button class="inputx" id = "input4" maxlength="1"></button>
<button class="inputx" id = "input5" maxlength="1"></button>
<button class="inputx" id = "input6" maxlength="1"></button>
<button class="inputx" id = "input7" maxlength="1"></button>
<button id="get">Check</button>
<button id="clean">Clean</button>
</div>
<div class="btnsChoices">
<h3>Choices</h3>
<button value ="X" maxlength="1">X</button>
<button value ="E" maxlength="1">E</button>
<button value ="M" maxlength="1">M</button>
<button value ="A" maxlength="1">A</button>
<button value ="P" maxlength="1">P</button>
<button value ="E" maxlength="1">E</button>
<button value ="L" maxlength="1">L</button>
</div>
JS:
$('#get').on("click", function(e){
e.preventDefault();
var a='';
$('.inputx').each(function(){
a += $(this).text();
});
if (a.toUpperCase() === "EXAMPLE") {
alert("success");
}
else{
alert("wrong");
}
});
$("#clean").on("click",function(){
$(".inputx").text("");
});
$(".btnsChoices button").on("click", function(){
var newValue = $(this).val();
$(".inputx").each(function(){
if($(this).text() == ""){
$(this).text(newValue);
return false;
}
});
});
and i update your jsfiddle: http://jsfiddle.net/RF867/12/
See http://jsfiddle.net/RF867/15/
The check has been removed for now, but I hope you find the following a little cleaner to work with:
<div id="scratchpad">
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<button id="get">Check</button>
<div id="choices">
<h3>Choices</h3>
<button value="X">X</button>
<button value="E">E</button>
<button value="M">M</button>
<button value="A">A</button>
<button value="P">P</button>
<button value="E">E</button>
<button value="L">L</button>
</div>
JavaScript to go with the new HTML
$('#scratchpad button').click(function(e) {
var letter = $(this).text();
if (letter === '') {
// do nothing
} else {
//re-enable choice
$('#choices button[value=' + letter + ']:empty:first').text(letter);
//clear button
$(this).text('');
}
});
$('#choices button').click(function(e){
var letter = $(this).text();
if (letter === '') {
// do nothing
} else {
// place choice
$('#scratchpad button:empty:first').text(letter);
// empty button letter
$(this).text('');
}
});
Related
I have multiple buttons on my page with css qtyButton:
I want to add the css to only button where value matches with the given value. I have used the following code but it is giving me error undefined in the alert box when i try to select the button value.
<button class="qtyButton">1</button>
<button class="qtyButton">2</button>
<button class="qtyButton">3</button>
$(document).on('click','.arrow',function(e){
var curr_qty=$('#qty').val();
var text = $('.qtyButton').filter(function () {
return this.value== curr_qty}).css('color', 'blue');
});
The issue is with this.value - the button doesn't have a .value - your HTML implies that you want to check the .text() of the button (or use this.innerText for more efficiency):
$("#clickme").click(function(e) {
var curr_qty = $('#qty').val();
$('.qtyButton').filter(function() {
return $(this).text() == curr_qty
}).css('color', 'red'); // changed to red as blue wasn't clear enough
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='qty' value="1" />
<button class="qtyButton">1</button>
<button class="qtyButton">2</button>
<button class="qtyButton">3</button>
<hr/>
<button id='clickme'>click me</button>
You need to use .innerText instead .value
return this.innerText == curr_qty
Assuming you have, somewhere in your DOM, a <button> with the class arrow, and a number <input> with the ID qty.
I want to respect your return this.value== curr_qty line, so I added value attributes to your .qtyButton elements.
<button class="arrow" type="button">.arrow</button>
<input type="number" id="qty" value="1">
<br />
<button class="qtyButton" value="1" >1</button>
<button class="qtyButton" value="2" >2</button>
<button class="qtyButton" value="3" >3</button>
$(document).on('click','.arrow',function(e) {
$('.qtyButton').css('color', '');
var curr_qty = $('#qty').val();
var text = $('.qtyButton').filter(function () {
return this.value == curr_qty;
}).css('color', 'blue');
});
I added a color reset of all elements before your logic.
$(document).on('click', function(e) {
var curr_qty = 2
$('.qtyButton').each(function() {
if (parseInt($(this).text()) === curr_qty) $(this).css('color', 'blue')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="qtyButton">1</button>
<button class="qtyButton">2</button>
<button class="qtyButton">3</button>
I have run a bit of problem with our user interface, here's my code:
I have a button here inside a
<button class="btn btn-info" type="button" id="btnSubmit" data-btn="{{ row[1] }}" data-id="{{ row[2] }}" data-toggle="modal" data-target="#myModal" contenteditable="false" disabled='disabled'> Pay</button>
I have been using row[2] from another function and it worked, so this time i used row[1] to evaluate data. The condition is that
when the row[1] of that row is empty the button would be disabled and would be colored to btn btn-danger and the text would be
made to "Paid" however thorugh my attempts I only made everything disabled or perhaps the last entry only as disabled. Here's my latest attempt:
<script type="text/javascript">
$(document).ready(function() {
var button = document.getElementById('btnSubmit');
var id = button.dataset.id;
$('#btnSubmit').attr('data-btn').onkeyup(function() {
if($(this).val() != '') {
$('#btnSubmit').prop('disabled', true);
}
else{
$('#btnSubmit').prop('disabled', false);
}
});
});
</script>
And its disabling all buttons. I just want the bytton to be enabled when its empty and disabled if its empty, and again as Ive said would be colored to btn btn-danger and the text would be made to "Paid" how do I do this in this case?
I've read the documentations and everything but it didn't work for some reasons. I also tried having an invisible input and getting its id but no luck. Please help
Okay... Assuming that data-bnt is the target element to check on keyup.
(I don't know what data-id is for...)
And that the target must not be empty to enable the submit button.
Then try this:
$(document).ready(function() {
var button = $('#btnSubmit');
var target = $('#'+button.data('btn'));
target.on("keyup",function(){
button.prop('disabled', ($(this).val() == '') ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="targetID">
<button
class="btn btn-info"
type="button"
id="btnSubmit"
data-btn="targetID"
data-toggle="modal"
data-target="#myModal"
contenteditable="false"
disabled='disabled'> Pay</button>
Hi how can I make a button that will increase and decrease a value? I the button to add 1 when clicked once and reduced the value by 1 when clicked again so it can't count to more than 1.
I have around 50 buttons and currently, it resets when I choose more than 2 buttons, but it has to add all the values of the buttons that were clicked once. Site around it looks similar to this:
var clicks = 0;
function clickME() {
clicks += 1;
if (clicks == 2) {
clicks = 0;
}
document.getElementById("clicks").innerHTML = clicks;
}
<input type="Button" id="bt" />
Considering each button (or more generically each element) is part of the DOM (Document Object Model), each one is an object, so no one makes you unable to use them: you can set the field clicks for each button DOM object:
function clickME(event) {
var btn = event.target;
btn.clicks = ((btn.clicks || 0) + 1) % 2;
window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1;
document.getElementById("clicks").innerText = window.clicks;
}
Checking out your code, I also simplified your logic replacing the if to check zero with the MOD (%) operator. Furthermore I replaced innerHTML with innerText because the number we won't to be rendered as HTML code, but as plain text, although in this case, it doesn't make difference.
Note:
Don't forget to pass the event data object with the onclick attribute in HTML:
<input onclick="clickME(event)" ...>
Check out this fiddle:
https://jsfiddle.net/57js0ps7/2/
You need to maintain a counter per each button individually - use an array to keep track of how many times a button has been clicked. If you don't the clicks var in your code will be two when you select 2 buttons and reset.
On your html:
lets say you have 50 of these
<button type="button" data-clicked="false">1</button>
<button type="button" data-clicked="false">2</button>
and on your javascript
var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
button.addEventListener('click', function() {
if (this.dataset.clicked == 'false') {
this.dataset.clicked = 'true';
this.innerHTML = parseInt(this.innerHTML) + 1;
}
else {
this.dataset.clicked = 'false'
this.innerHTML = parseInt(this.innerHTML) - 1;
}
})
});
EDIT: Here is a working fiddle
Since you have this tagged as jQuery here is a solution using jQuery. The solution involves using the data- attribute to hold the click count for each button (input). Not sure why you use inputs instead of buttons, but I kept that the same
It also has a getTotal() function that goes through each element and tallies the click to see how many slots were selected and displays that number for you.
$(document).ready(function() {
$(".btn").on("click", clickME);
});
function clickME() {
var clicks = $(this).data("clicks");
var newClicks = parseInt(clicks) + 1;
if(newClicks > 1){
newClicks = 0;
}
// set the new click count on the element
$(this).data("clicks", newClicks);
setTotal();
}
function setTotal(){
var total = 0;
$(".btn").each(function(imdex, btn) {
var currClicks = parseInt($(btn).data("clicks"));
total += currClicks;
});
$("#clicks").text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="Button" class="btn" data-clicks=0 value="0" />
<input type="Button" class="btn" data-clicks=0 value="1" />
<input type="Button" class="btn" data-clicks=0 value="2" />
<input type="Button" class="btn" data-clicks=0 value="3" />
<input type="Button" class="btn" data-clicks=0 value="4" />
<input type="Button" class="btn" data-clicks=0 value="5" />
<input type="Button" class="btn" data-clicks=0 value="6" />
<div>
<p>You've choose <a id="clicks">0</a> slot/s.</p>
</div>
i have a form with two buttons and a checkbox, i want when user checks the checkbox one of the button is enabled while the other button is disabled. So when the forms loads one will be enable by default and the other disabled, but after the checkbox has been checked the other becomes enabled while that which was enable by default become disabled..
i can actually do this for one button but i can do this for two button, please can someone with javascript skills help me out here thanks.
You could do this with JQuery. Try the snippet below:
$('document').ready(function() {
$('.checkbox_check').change(function() {
var isChecked = $('.checkbox_check').is(':checked');
$('#btn1').prop('disabled', !isChecked);
$('#btn2').prop('disabled', isChecked);
});
})
<button type="button" id='btn1' disabled>Button 1</button>
<button type="button" id='btn2'>Button 2</button>
<input type="checkbox" class='checkbox_check' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Update:
Per the comment below, here's a Vanilla JS solution:
function toggleDisabled() {
var isChecked = document.getElementById("checkbox_check").checked;
document.getElementById('btn1').disabled = !isChecked;
document.getElementById('btn2').disabled = isChecked;
}
<button type="button" id="btn1" disabled>Button 1</button>
<button type="button" id="btn2">Button 2</button>
<input type="checkbox" id="checkbox_check" onChange="toggleDisabled()" />
You can achieve this with Vanilla JS
function fireChange() {
const button1 = document.getElementById('test1');
const button2 = document.getElementById('test2');
button1.disabled = !button1.disabled;
button2.disabled = !button2.disabled;
}
<button disabled id="test1"> first button </button>
<button id="test2"> second button </button>
<input type="checkbox" onChange="fireChange()" />
I want to make my button elements act like radio buttons. I mean that if I select one with same name or id then the others will be un-selected.
<button name="options" id="options>Button 1</button>
<button name="options" id="options>Button 2</button>
<button name="options" id="options>Button 3</button>
How can I do this?
I would change the id to class and then for each group of buttons you want to act as a group have a unique class name. Here is an example of two button groups, I added the feature of reenabling buttons by clicking the only one left
$('button').on('click', function() {
var name = $(this).attr('name');
var cl = $(this).attr('class');
var reenable = false;
$('.' + cl).each(function() {
if ($(this).attr('name') != name) {
if ($(this).attr('disabled') == 'disabled')
reenable = true;
else
$(this).attr('disabled', true);
}
});
if (reenable)
$('.' + cl).attr('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="options1" class="options">Button 1</button>
<button name="options2" class="options">Button 2</button>
<button name="options3" class="options">Button 3</button>
<br />
<button name="options1" class="options2">Button 1</button>
<button name="options2" class="options2">Button 2</button>
<button name="options3" class="options2">Button 3</button>