Develop Reference

Sync 2 HTML Inputs Range and Number

Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}

You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>

let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm

Event is not triggered

I have a event that's triggered when the number value changes in the <input type="number"> one below:
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">
It works fine.
However, I have plus/minus buttons below it. These buttons increase/decrease the value but when that happens, the event is never triggered. Why?
How can I make it so that the event is triggered?

I think you need below code for update value in input box by clicking on plus and minus button.
$(".minus,.plus").on('click',function(){
if($(this).val()=="-")
{
var incr=-1;
}
else
{
var incr=1;
}
$(".lorem").val(parseInt($(".lorem").val())+incr);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="number" inputmode="numeric" pattern="[0-9]*" size="4" class="lorem" value="0" step="1">
<input type="button" class="minus" value="-">
<input type="button" class="plus" value="+">

After you change a value with plus/minus buttons, you need to fire a change event on that numeric field. It would look something like this:
$(".minus").click(function() {
var $numberField = $("input[type=number]");
// Assign a new value to the field and fire change event
$numberField.val("1").change();
})
If you need some more help, please upload your JavaScript code.

Change $(this) input field color based on class effecting all classes in div

I have this HTML that occurs multiple times on a page:
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span></p>
</div>
<div class="col-r">
<div class="qty-days">
<input name="Mon" class="qty-input" value="0" maxlength="2" />
<input name="Tue" class="qty-input" value="0" maxlength="2" />
<input name="Wed" class="qty-input" value="0" maxlength="2" />
<input name="Thu" class="qty-input" value="0" maxlength="2" />
<input name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>
I have this JQuery to detect when the input field is changed and if the value is greater than 0, change the color to red.
$(".qty-input").change(function(){
var qty = parseInt($(this).val());
if(qty > 0){
$(this).css('color','red');
}
else{
$(this).css('color','black');
}
});
It is behaving very unpredictably. When I change the value of the first input field (Monday), it makes all 5 inputs red. Then sometimes it is changing the colors back to black in completely different rows sets of days. Seems like a simple problem to fix, but having trouble figuring it out.

The problem is that this code:
var qty = $(this).val();
Returns a string. And this code compares that string to a Number
if(qty > 0){
Try changing the first line of code to:
if ($(this).val()) {
var qty = parseInt($(this).val(), 10);
}
And it should start to work more consistently but you will also want to validate that the input is all numbers.

Thanks for all the responses. It prompted me to dig deeper at which point I discovered another piece of code in a different JS file that was trying (incorrectly!) to do the same thing. The code I have above is in fact sound and works perfectly. I apologize for wasting anyone's time here. I didn't realize that my client had a developer who had already attempted to do this (and who also put the code in the wrong file).

Use change event target to get to the element
$(document).ready(function() {
$(".qty-input").change(function(e) {
var target = e.target;
var qty = $(target).val();
if (qty > 0) {
$(target).css('color', 'red');
} else {
$(target).css('color', 'black');
}
alert("value is " + qty)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canteen-item">
<div class="col-l">
<h4>Chicken Sandwich</h4>
<p>$<span class="canteen-price">3.50</span>
</p>
</div>
<div class="col-r">
<div class="qty-days">
<input type="text" name="Mon" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Tue" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Wed" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Thu" class="qty-input" value="0" maxlength="2" />
<input type="text" name="Fri" class="qty-input" value="0" maxlength="2" />
</div>
</div>
</div>

Dynamically change value of input textField

I have a html block as follows with an input textfield that updates the entire application when it is manually edited.
How can I dynamically target and change this input text field? In the following this would be value="2"
<my-attribute param="Count" min="0" max="100" step="1">
<span id="label">Count</span><span id="input">
<dat-input-number id="input" value="2" step="1" min="0" max="100">
<div id="blocker" on-dblclick="" style="width: 152px; height: 15px;"></div>
<input id="number" type="text" on-keydown="">
</dat-input-number></span>
</my-attribute>

<script>
document.getElementById('number').value = "yourValueHere";
</script>
Oh, and don't forget to close your <input id="number" type="text" on-keydown=""> with an </input>

<script>
var theInput = document.getElementById('input');
theInput.value = '5';
</script>
Working demo here
Note: This is super trivial and I have no doubt that you could have found enough knowledge through a Google search to attempt this on your own. :)

How to change the max value for input type number on HTML5 with Javascript?

I need change the max attribute of an input element with JavaScript. For example:
<input type="number" name="miname" min="0" max="MyVar" value="0"/>

You can assign an id to your input :
<input id="myInput" type="number" name="miname" min="0" max="MyVar" value="0"/>
then access it via javascript:
var input = document.getElementById("myInput");
input.setAttribute("max",100); // set a new value;
Note you can also access it directly if your input is in a form
document.formName.miname.setAttribute("max",newValue);

sharing the angular way of doing it. Use [attr.max].
<input matInput type="number" min="0" [attr.max]="totalOrders" placeholder="Total Skybridge Orders" formControlName="totalSkybridge" (change)="onTotalSkybridgeOrders($event)"