Develop Reference

How select specific tag in jQuery using if else statement?

I would like to click the button and make the value appear in <h3> inside the <div> and according to that value the background-color would change.
For example, when I typed a value (Your number) and clicked on Click Me!, h3 inside the div should show this typed value and the background-color would also change accordingly.
For example, if I typed 33 in Your number and then clicked, the value to appear would be 33 and the color would be orange. Thus:
My code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form name="myform">
Your number:
<input type="text" name="inputbox" id='textBox' value="" />
<input type="button" name="button" class="member" value="Click me!" />
<div class='box1' style='background-color:lime;width:33.33%;padding-left:15px;padding-right:15px;'>
<h3>
0
</h3>
<p>
Valor
</p>
</div>
</form>
<script>
$(function() {
$('.member').click(function() {
var answer = $("#textBox").val();
if (answer <= 20) {
$('.box1').css('background-color','red');
} else if (answer <= 50) {
$('.box1').css('background-color','orange');
} else {
$('.box1').css('background-color','steelblue');
}
});
});
</script>
So I wanted to select the h3 tag and change it with if else statement.

If I understand, you simply want to update the h3 tag content?
Here is some code (I removed repetitions):
$(document).ready(function() {
$('.member').click(function() {
let answer = $("#textBox").val();
let color;
if (answer <= 20) {
color = 'red';
} else if (answer <= 50) {
color = 'orange';
} else {
color = 'steelblue';
}
$('.box1').css('background-color',color).find('h3').html(answer);
});
});

Prevent submit form when using jQuery to change input number field [duplicate]

This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 1 year ago.
We use the following code to change the input number value, using button up and down.
But when we clicking the increase or decrease button, it also submits the form.
How can we prevent it from submitting the form?
HTML:
<form action="url" method="post" id="product_addtocart_form" novalidate="novalidate">
<div class="field qty">
<div class="control quantity">
<input type="number"
name="qty"
id="qty"
min="1"
size="number"
value="<?= $block->getProductDefaultQty() * 1 ?>"
title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
class="input-text qty"
data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
/>
<div class="quantity-nav"><button class="quantity-button quantity-up"><i class="far fa-angle-up"></i></button><button class="quantity-button quantity-down"><i class="far fa-angle-down"></i></button></div>
</div>
</div>
</form>
jQuery:
<script>
require(['jquery'], function ($) {
$('.quantity').each(function() {
var spinner = $(this),
input = spinner.find('#qty'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("#qty").val(newVal);
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("#qty").val(newVal);
});
});
});
</script>

Just use the type attribute within button tag.<button type="button" class="quantity-button quantity-up">

change button type from adding type="button" , your code will work fine

Input Value to a Button onclick

The script is for a gambling game. User types in wager and number from 2,3,5,50.
If the wheel spins , and the number on the wheel equals to the number , the user gets wager * number.
Example: User wagers 100 credits and bets on 2. Wheel spins and if it lands on 2 , User Gets 100*2 credits.
How do I change from typing 2,3,5,50 into a input, to a button "bet on 2" , " bet on 3 " , respectively.
Problem with my current: User enters every round as long as a valid wager and number is provided, when the wheel spins. Using a button, will allow the user to choose when he wants to bet( which is by clicking the button)
Check this out: http://codepen.io/hokaien/pen/RKjPbZ
if ( options[index] === wantTo ) {
// if options[index] equals to number
var el = document.getElementById('number');
var res = originalNumber += (amountBet * wantTo);
el.textContent = res;
finalMsg = " You won " + (amountBet * wantTo) + " credits";
} else if (test3 != "2" || test3 != "3" || test3 != "5" || test3 != "50") {
finalMsg = " Number should be from 2, 3, 5, 50 ";
} else if (amountBet > originalNumber) {
finalMsg = " Not enough credits ";
} else if (amountBet < 0) {
finalMsg = " Cannot bet negative ";
}

Here you go (codepen)
HTML added:
<input type='button' class='betButton' value="2"/>
<input type='button' class='betButton' value="3"/>
<input type='button' class='betButton' value="5"/>
<input type='button' class='betButton' value="50"/>
also removed the number input
JS added (jQuery):
this code handles clicks and sets the value of currentBet, it also adds a class called selected to the player's choice for clarity
$('.betButton').click(function() {
currentBet = $(this).val();
$(this).addClass("selected");
$('.betButton').not(this).removeClass("selected");
});
JS Edits:
replaced refrences to the old number input and replaced it with currrentBet... afected variables are: wantTo, test2 and test3
replaced the code that used to disable/enable input while spinning with
$( ".betButton" ).prop( "disabled", true )
and
$( ".betButton" ).prop( "disabled", false )
to disable and enable the bet buttons instead
CSS added:
input.betButton {
border: none;
background: white;
color: black;
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
}
input.betButton:disabled {
opacity: 0.4;
}
input.betButton.selected {
background: red;
color: white;
transition: 0.5s;
}

Example
$(function() {
$('#btn').click(function() {
var data = $(this).val();
if(isNaN(data) == false)
{
alert('this is numeric');
}
else
{
alert('Not a numbre');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="button" id="btn" value="2" >

You can get the text of the buttons
Suppose you have four buttons
<input type='button' class='myButton' value="2" />
<input type='button' class='myButton' value="3" />
<input type='button' class='myButton' value="5" />
<input type='button' class='myButton' value="50" />
You can easily check if the value is number or not
$('input.myButton').click(function(){
var btn = $(this)
var btnValue = btn.val();
var isNum = $.isNumeric(btnValue);
});
If your button is defined as <button type="button">[num]</button Then you can get btn.text() in place of btn.val().

If using jQuery, you can use .isNumeric() to check for an input whether its number or not.
var result=$.isNumeric(txtInput.val());
Check for clicked buttons value
var result=$.isNumeric(btnClickedButton.val());
Or
$(".btnNumber2").click(function(){
var result=$.isNumeric($(this).val());
alert(result);
});
UPDATED ANSWER
HTML
<input type='button' class='myButton' value="bet on 2" data-val="2" />
<input type='button' class='myButton' value="bet on 3" data-val="3" />
<input type='button' class='myButton' value="bet on 5" data-val="5" />
<input type='button' class='myButton' value="bet on 50" data-val="50" />
JS
var clickedScore=0;
$(".myButton").click(function(){
var btn=$(this);
clickedScore=btn.attr("data-val");
});
function CheckIfClickedButtonValueEqualsWheelNumber() //HAVE TO MAKE IT LONG
{
if(parseInt(clickedScore)==YOUR_NUMBER_FROM_WHEEL){
{
//YOUR EXISTING LOGIC, NOT REPEATING IT HERE
}
}

jQuery increment or decrement variable by 1

I have simple plus and minus button on either side of input field as in the code below
<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="<?php echo set_value('noOfRoom'); ?>" name="noOfRoom" />
<input type="button" value="+" id="adds" onclick="add()" class="btn btn-default" />
with aim to add or subtract rooms while adding rooms and the jquery functions as
function add() {
var a = $("#noOfRoom").val();
a++;
if (a => 1) {
$("#subs").removeAttr("disabled");
}
$("#noOfRoom").val(a);
};
function subst() {
var b = $("#noOfRoom").val();
if (b.length > 0 && b >= 1) {
b--;
$("#noOfRoom").val(b);
}
else {
$("#subs").attr("disabled", "disabled");
}
};
but the following problems are shown
when i click on subtract (-) button at the initial phase -1 is shown in input box, where by default the subtract (-) button should be disabled to make rooms number negative.
Each time when I click on PLUS or MINUS buttons the numbers are added or subtracted by 2. How could I solve it?

Update add a fiddle https://fiddle.jshell.net/n7ug52dr/
Each time you click will only add and sub by 1, and it never show the -1
You can edit code like this:
function add() {
var a = $("#noOfRoom").val();
a++;
if (a && a >= 1) {
$("#subs").removeAttr("disabled");
}
$("#noOfRoom").val(a);
};
function subst() {
var b = $("#noOfRoom").val();
// this is wrong part
if (b && b >= 1) {
b--;
$("#noOfRoom").val(b);
}
else {
$("#subs").attr("disabled", "disabled");
}
};

Moving comments to answer as no-one took onboard the suggestions:
I suggest not using inline onclick= handlers with jQuery. They separate the event handler from the event code for no reason and don't allow for the extra features of jQuery event handlers.
Use prop and not attr for DOM element properties (like disabled). This has the extra advantage of taking a boolean value.
You can then simply use !a to control the disabled state (as you are only checking for 0).
As a good habit always select DOM elements once and save the selector.
e.g.
$('#adds').click(function add() {
var $rooms = $("#noOfRoom");
var a = $rooms.val();
a++;
$("#subs").prop("disabled", !a);
$rooms.val(a);
});
// Set initial disabled state
$("#subs").prop("disabled", !$("#noOfRoom").val());
$('#subs').click(function subst() {
var $rooms = $("#noOfRoom");
var b = $rooms.val();
if (b >= 1) {
b--;
$rooms.val(b);
}
else {
$("#subs").prop("disabled", true);
}
});
JSFiddle: https://jsfiddle.net/k7nyv84b/4/

Here you go, champ! Made your code a little cleaner as well
See the working example below
$(function(){
$('#adds').on('click',add);
$('#subs').on('click',remove);
});
function add(){
var input = $('#noOfRoom'),
value = input.val();
input.val(++value);
if(value > 0){
$('#subs').removeAttr('disabled');
}
}
function remove(){
var input = $('#noOfRoom'),
value = input.val();
if(value > 0){
input.val(--value);
}else{
$('#subs').attr('disabled','disabled');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%"/>
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="0" name="noOfRoom" />
<input type="button" value="+" id="adds" class="btn btn-default" />

take a look at this solution
<input type="button" value="-" id="subs" onclick="subst()" disabled>
<input type="text" id="noOfRoom">
<input type="button" value="+" id="adds" onclick="add()">
function add() {
var a = $("#noOfRoom").val();
a++;
if (a >= 1) {
$("#subs").removeAttr("disabled");
}
alert(a);
$("#noOfRoom").val(a);
}
function subst() {
var b = $("#noOfRoom").val();
if (b.length > 0 && b >= 1) {
b--;
alert(b);
$("#noOfRoom").val(b);
}
else {
$("#subs").attr("disabled", "disabled");
}
//alert('works well');
}

The simplest way is to use DOM to navigate through elements and get its current value and then increase/decrease them.
I extended the code to make sure when minus button is clicked value isn't reduce below zero.
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="number" class="input-lg" id="quantity" name="quantity" value="1" min="1" style="padding:0px;height:30px;">
<input type="button" value="+" class="qtyplus" field="quantity">
<input type="submit" name="add" id="add" class="btn btn-large btn-border btn-dark" value="GET IT NOW" style="opacity: 1;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
// This button will increment the value
$('.qtyplus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});
</script>

<button onClick="myfun()">+</button>
<!--<button onClick="myfun()" id="pluse">+</button>-->
<input type="text" id="pluse" >
<button onClick="myfun1()">_</button>
var a = 0;
function myfun(){
a++;
document.getElementById('pluse').value = a;
//document.getElementById('pluse').innerHTML = a;
}
function myfun1(){
a--;
document.getElementById('pluse').value = a;
}

After Jquery fadein/out animate an/some errors, buttons can't be clicked

I have a form that user can select a/some year form select-options list than add these to next select-list.
To achieve it, I've create 2 select-option and four buttons to add or remove.
The part to insert and remove are achieved but the problem appear when user click add button but there is/arenn't options selected.
The error-message is successful appeared with add jquery animate-fadein/out.
But when error-message have appeared, the button isn't accessible/cann't clicked.
Below is the HTML, and js.
HTML
<div id="segitiga" class="sgtg1" style="background-image: url('picture/left_triangle.png'); display: none"></div>
<div id="err_msg_border" class="err_msg_border1" style="display: none"></div>
<div id="err_msg" class="err_msg1" style="display: none;">Pilih satu atau lebih tahun untuk dimasukkan ke daftar sebelah kanan</div>
<select id="list_tahun" style="width: 80px; margin-right: 5px" multiple="multiple" size="22"></select>
<input type="button" value="Add > &gt" class="btn_tahun" id="A" >
<input type="button" value="Add All > &gt" class="btn_tahun" id="AA">
<input type="button" value="< &lt Remove" class="btn_tahun" id="R" disabled="disabled" >
<input type="button" value=" < &lt Remove All" class="btn_tahun" id="RA" disabled="disabled">
<div id="segitiga" class="sgtg2" style="background-image: url('picture/right_triangle.png');display: none"></div>
<div id="err_msg_border" class="err_msg_border2" style="display:none"></div>
<div id="err_msg" class="err_msg2" style="display: none">Pilih satu atau lebih tahun yang akan dihapus</div>
Javascript
$(document).ready(function() {
a = document.getElementById('list_tahun');
b = document.getElementById('list_tahun_pilihan');
$("#A").click(function() {
count = 0;
count2 = 0;
for (var i = 0; i < a.options.length; i++) {
if (a.options[i].selected) {
option = document.createElement("option");
option.text = a.options[i].text;
option.value = a.options[i].value;
b.add(option);
a.options[i].selected = false;
a.options[i].disabled = true;
count++;
}
}
if (count < 1) {
$(".sgtg1").fadeIn();
$(".err_msg_border1").fadeIn();
$(".err_msg1").fadeIn();
} else if (count > 0) {
$(".sgtg1").fadeOut();
$(".err_msg_border1").fadeOut();
$(".err_msg1").fadeOut();
document.getElementById('R').disabled = false;
document.getElementById('RA').disabled = false;
}
for (var i = 0; i < a.options.length; i++) {
if (a.options[i].disabled) {
count2++;
}
}
if (count2 === a.options.length) {
document.getElementById('A').disabled = true;
document.getElementById('AA').disabled = true;
} else {
document.getElementById('A').disabled = false;
}
});
....
How I can set up the focus again to the buttons ?
-Thanks-

Your html is invalid.
First Change this:
<input type="button" value="Add>>" class="btn_tahun" id="A" >
To:
<input type="button" value="Add>&gt" class="btn_tahun" id="A" >
Text like < or > should be written in code like this:
< ==> <
> ==> >

After I inspect element with firefox, the height of area of error message -class="err_msg1" is too height and it's covered the buttons. So, when I want to click the button, the cursor will appear into class="err_msg1".
My advice, be crefully about specify each height-width of element so, when you want some of element runs well, don't let their layer are stacked.