Develop Reference

focus function working in console but in through the code

I am trying to create a webpage which allows you to enter an IP address(IPv4). I want that whenever user has added 3 numbers in the textbox the focus should automatically be transferred to the next textbox. For that I have given onkeypress event to the textbox and called a JS function and sent an argument to it. Have a look at my code.
<input onkeypress="check(this)" type="text"
id="<?php if($i==1){echo "5";} else {echo "1";} ?>"
class="form-control" placeholder="First Octate"/>
Here is the check function
function check(element){
if(element.value.length==2){
newId= parseInt(element.id) + 1
document.getElementById(newId.toString()).focus()
}
}
Now if I log the document.getElementById(newId.toString()) to the console, it is giving me a valid element and if I use focus method with the logged element I am actually able to change the focus. What I can't understand is it is not doing the same thing if done using this function. I am not able to change the focus according to the condition

Problem with your code is the focus is not moving because of the action it takes. You need to add a slight delay
function check(element) {
if (element.value.length == 2) {
var newId = parseInt(element.id) + 1
setTimeout(()=>document.getElementById(newId.toString()).focus(),1);
}
}
<input onkeypress="check(this)" type="text" id="1" />
<input onkeypress="check(this)" type="text" id="2" />
<input type="text" id="3" />
You would be better off with keyup event
function check(element) {
if (element.value.length == 3) {
var newId = parseInt(element.id) + 1
document.getElementById(newId.toString()).focus();
}
}
<input onkeyup="check(this)" type="text" id="1" />
<input onkeyup="check(this)" type="text" id="2" />
<input type="text" id="3" />
Now this code is fine if they are typing, if they paste in a value, you have a whole new problem to solve.

Try adding a setTimeout command to your code:
function check(element){
if(element.value.length==2){
newId= parseInt(element.id) + 1
setTimeout(function() {
document.getElementById(newId.toString()).focus()
});
}
}
<input onkeydown="check(this)" type="text"
id="1"
class="form-control" placeholder="First octet"/>
<input onkeydown="check(this)" type="text"
id="2"
class="form-control" placeholder="Second octet"/>
<input onkeydown="check(this)" type="text"
id="3"
class="form-control" placeholder="Third octet"/>
<input onkeydown="check(this)" type="text"
id="4"
class="form-control" placeholder="Fourth octet"/>
Key events seem to refocus their targets' inputs after they have been fired. This tries to resolve that by waiting until the event has finished being fired, from which it will then focus the next input.
Also, I suggest you use keydown instead of keypress — the latter is deprecated.

You can set your events up in a window.load script and use data-attributes to inform your input listener on how many numbers to listen for. Also, if you use type='number' you can ensure you'll get numbers
window.addEventListener('DOMContentLoaded', () => {
let q = document.querySelectorAll('.autofoc');
q.forEach(el => {
el.addEventListener('input', e => {
let l = +e.target.dataset.len
if (e.target.value.length >= l) {
e.target.value = e.target.value.slice(0, l)
e.target.nextElementSibling.focus()
}
})
})
})
<input type="number" data-len='3' class="form-control autofoc" placeholder="Area code" />
<input type="number" data-len='3' class="form-control autofoc" placeholder="First 3" />
<input type="number" data-len='4' class="form-control autofoc" placeholder="Last 4" />

Addition/subtraction to a specific value to user input

Is it possible to have a textbox where the user will input a number and in another textbox, which will automatically add 5 to the value of the first textbox and subtract 5 to the value in the third textbox?
For example:
User input: 10
2nd textbox: 15
3rd textbox: 5
Please help

You can do it like this:
<input type="text" id="input1" onkeyup="setValues(this.value);">
<input type="text" id="input2">
<input type="text" id="input3">
<script type="text/javascript">
function setValues(value){
document.getElementById('input2').value = (parseInt(value)+5);
document.getElementById('input3').value = (parseInt(value)-5);
}
</script>

you can find solution Link.
HTML Part
<input type="number" id="input1">
<input type="number" id="input2">
<input type="number" id="input3">
JS Part
$('#input1').bind('click keyup', function(event) {
$('#input2').val(parseInt(this.value)+5);
$('#input3').val(parseInt(this.value)-5);
})

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>

using innerHTML with <input>

I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.

you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'

If you want the value of an input tag, you want to use .value.

First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>

Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}

You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>

realtime update text in javascript by same id

How do I update the text in the id="b"?
<script type="text/javascript">
function updateb()
{
var a= document.getElementById("a").value;
var b = document.getElementById("b").innerHTML = a * 10;
}
</script>
<input type="text" id="a" name="a" value="10" onKeyUp="updateb();" /><p id="b" name="b"></p>
<input type="text" id="a" name="a" value="20" onKeyUp="updateb();" /><p id="b" name="b"></p>
<input type="text" id="a" name="a" value="30" onKeyUp="updateb();" /><p id="b" name="b"></p>

1.) IDs should be always unique in a page.
2.) GetElementById always returns only one element with same id if there are multiple ids with same value
3.) for above question you can try getElementsByName. it is quite similar to getElementById with a diff that it will give u all elements with same name. if you do
x= document.getElementsByName("b");
x[0] will contain first one
x[1] will contain 2nd one
x[2] will contain 3rd one
If you want it be done by getElementById then change ur elements id with any other unique name like:
<script type="text/javascript">
function updateb(Src)
{
var a= Src.value;
document.getElementById("b" + Src.id.substr(1)).innerHTML = a * 10;
}
</script>
<input type="text" id="a1" name="a" value="10" onKeyUp="updateb(this);" /><p id="b1" name="b"></p>
<input type="text" id="a2" name="a" value="20" onKeyUp="updateb(this);" /><p id="b2" name="b"></p>
<input type="text" id="a3" name="a" value="30" onKeyUp="updateb(this);" /><p id="b3" name="b"></p>

Note that an id field must be unique to a document. That is, you can't have three elements with the same ID as in your example.
Otherwise, the code you posted should update the contents of B, though obviously you'd need to do this in response to an onchange or onblur event on the input field.

As others have pointed out, all elements in a document should have a unique id.
In your case, however, an id may not be required at all, as you can use the relative positions of elements to achieve your aims.
This example doesn't need an id or a name, but this may differ in your case, depending on your overall requirements.
<script type="text/javascript">
function updateb(inputElement)
{
var a = inputElement.value;
var target = inputElement.nextSibling;
if(target != null){
target.innerHTML = a * 10;
}
}
</script>
<input type="text" value="10" onKeyUp="updateb(this);" /><p></p>
<input type="text" value="20" onKeyUp="updateb(this);" /><p></p>
<input type="text" value="30" onKeyUp="updateb(this);" /><p></p>
Using a solution like the one offered by #KoolKabin may be better in the long run, as it is more tolerant to changes in the HTML structure. Either way, there are usually several different ways to approach any given problem, and you should evaluate the best for the circumstances.