Develop Reference

HTML Number Input: Only Allow Arrow Buttons

Here is what I mean:
Is it possible to only allow input via clicking the arrow buttons, and NOT from actually typing?
Ie: I could not type in "11", but if I click the up arrow 11 times then it will go to 11?
Here is my input field right now:
<input type="number" min="00" max ="99" id="timer02_min"
maxlength="2" value="00">
Is there some native way of doing this? Or should I look more into buttons and some styling?

Use event.preventDefault() in keydown event;
// no keyboard
document.getElementById("timer02_min").addEventListener("keydown", e => e.preventDefault());
// allow up/down keyboard cursor buttons
document.getElementById("timer02_min2").addEventListener("keydown", e => e.keyCode != 38 && e.keyCode != 40 && e.preventDefault());
no keyboard:
<input type="number" min="00" max ="99" id="timer02_min"
maxlength="2" value="00">
<br>
with up/down cursor keys:
<input type="number" min="00" max ="99" id="timer02_min2"
maxlength="2" value="00">

function change(n){
var num = document.getElementById("num");
var number1 = num.innerHTML;
var number = Number(number1);
var num2 = number.toString();
if(n == "s"){
}else{
number = number+n;
}
if(number <= 0){
number = 0;
}
if(number > 99){
number = 99;
}
if(num2.length == 1){
var num1 = number;
number = "0"+num1;
}
document.getElementById("num").innerHTML = number;
}
change("s");
.input{
border-style: solid;
border-color: gray;
border-width: 1px;
border-radius: 2px;
padding: 1px;
height: 26px;
width: 40px;
text-align: left;
position: relative;
padding-left: 10px;
}
.spinner-button {
position: absolute;
top: 0px;
right: 0px;
}
#inc-button{
padding-top: 3.5px;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin-bottom: 1px;
height: 10px;
line-height: 10px;
cursor: pointer;
border: none;
user-select: none; /* Standard */
}
#dec-button{
cursor: pointer;
padding-top: 3px;
background-color: #ccc;
width: 14.5px;
text-align: center;
margin: 0px;
height: 10px;
line-height: 10px;
border: none;
user-select: none; /* Standard */
}
#inc-button:hover,#dec-button:hover{
background-color: #b5b5b5;
}
<div id="timer02_min" class="input">
<div id="num">00</div>
<div class="spinner-button">
<div onclick="change(1);" id="inc-button">+</div>
<div onclick="change(-1);" id="dec-button">-</div>
</div>
</div>
Try This!
The Number you want to start put it in the #num div.

How to create a webpage that shows a number with increment,decrement buttons and that counts down from the NUmber to zero?

I want to make a website with HTML, JAvascript and CSS,
There will be a number showing in the screen. THe user can decrement or increment the preset value using buttons.Start /stop button will start counting down from the shown number to zero. The page shows an alertbox when the number reaches zero. I know only html and css basics can anybody helpThis is a rough sketch

This may help get you started:
var intvl;
var valueContainer = document.getElementById("value");
document.getElementById("decrement").addEventListener("click", function(e){
var value = +valueContainer.textContent;
if(value){
valueContainer.textContent = value - 1;
}
});
document.getElementById("increment").addEventListener("click", function(e){
var value = +valueContainer.textContent;
valueContainer.textContent = value + 1;
});
document.getElementById("toggle").addEventListener("click", function(e){
if(intvl){
clearInterval(intvl);
} else {
var curr = +valueContainer.textContent;
intvl = setInterval(function(){
if(curr){
valueContainer.textContent = --curr;
} else {
clearInterval(intvl);
document.getElementById("messages").innerHTML = "Alert<br/>----------------<br/>Count reached 0!";
}
}, 1000);
}
});
document.getElementById("reset").addEventListener("click", function(e){
clearInterval(intvl);
valueContainer.textContent = 25;
document.getElementById("messages").innerHTML = "";
});
#messages {
text-align: center;
border: 1px solid grey;
width: 80%;
margin-bottom: 50px;
}
#wrapper {
text-align: center;
border: 1px solid grey;
display: inline-block;
width: 40%;
padding: 2px;
}
#wrapper > div {
display: inline-block;
}
body {
text-align: center;
}
#main > button, #controls > button {
border: 1px solid grey;
border-radius: 5px;
background-color: inherit;
padding: 2px 10px;
}
#controls {
margin-top: 10px;
}
<div id="wrapper">
<div id="messages">
</div>
<div id="main">
<button id="decrement">-</button>
<span id="value">25</span>
<button id="increment">+</button>
</div><br/>
<div id="controls">
<button id="toggle">Start/Stop</button>
<button id="reset">Reset</button>
</div>
</div>

Assign a value to input field

let slider = document.getElementById("slider");
let rightBtn = document.getElementById("rightbutton");
let leftBtn = document.getElementById("leftbutton");
let element = document.getElementById("elementtype").innerHTML;
let celciusBoiling = document.getElementById("celciusboiling").value;
let chlorine = ["Chlorine", 100, 200];
function moveSliderRight() {
if (rightBtn.onclick) {
slider.value++;
}
}
function moveSliderLeft() {
if (leftBtn.onclick) {
slider.value--;
}
}
function main() {
moveSliderRight();
moveSliderLeft();
if (slider.value == parseInt(2)) {
element = chlorine[0];
celciusBoiling = chlorine[1];
}
}
main();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: peachpuff;
}
header {
width: 90%;
margin: 10px auto 0px;
}
header h1 {
text-align: center;
border: 1px solid black;
padding: 15px 0px;
}
.navbar {
width: 75%;
margin: 50px auto 50px;
padding: 10px 0px;
display: flex;
justify-content: space-around;
border: 1px solid black;
}
.navlinks {
border-right: 1px solid black;
width: 50%;
text-align: center;
display: block;
}
#nav3 {
border: none;
}
#intro {
margin: 0px auto 50px;
width: 40%;
text-align: center;
}
#slider {
-webkit-appearance: none;
background-color: grey;
width: 90%;
display: block;
margin: auto;
}
#slider::-webkit-slider-thumb {
cursor: pointer;
}
#slider::-moz-range-thumb {
cursor: pointer;
}
#valuetag {
text-align: center;
margin-top:25px;
}
h2 {
text-align: center;
font-size: 45px;
text-decoration: underline;
}
#display {
width: 90%;
margin-left: 50px;
margin-bottom: 50px;
font-size: 40px;
}
#display div {
display: inline-block;
width: 45%;
text-align: center;
}
span {
font-size: 15px;
}
.boiling {
margin-left: 6%;
}
.boilingpointslider {
text-align: center;
}
button {
margin: 20px 20px 20px 0px;
width: 75px;
}
<header>
<h1>Periodic Table Gases - Interative Slider</h1>
<nav>
<div class="navbar">
<div class="navlinks">Boiling Point</div>
<div class="navlinks" id="nav3">Melting Point</div>
</div>
</nav>
</header>
<div id="intro">
<p>Interact with the slider buttons to view the displayed properties held by gases, within the periodic table of elements.</p>
</div>
<h2 id="elementtype">Hydrogen</h2>
<div id="display">
<div class="boiling">
<h2>Boiling Point</h2>
<input id="celciusboiling" type="number" value="0"><span>℃</span>
<input id="fahrenboiling" type="number"><span>℉</span>
<input id="kelvinboiling" type="number"><span>K</span>
</div>
<div class="melting">
<h2>Melting Point</h2>
<input id="celciusmelting" type="number"><span>℃</span>
<input id="fahrenmelting" type="number"><span>℉</span>
<input id="kelvinmelting" type="number"><span>K</span>
</div>
</div>
<input type="range" min="0" max="9" value="0" id="slider">
<div class="boilingpointslider">
<button id="leftbutton" onclick="moveSliderLeft()">Left</button>
<button id="rightbutton" onclick="moveSliderRight()">Right</button>
</div>
I am having issues transferring a value to an input field.
Within the snippet linked their is a heading with the value hydrogen and to the bottom left their is a boiling point heading with a input field for celcius.
I'm trying to achieve a scenario whereby you move the slider along using the buttons and at each value the heading changes to a different element and the input value for just the celcius boiling point changes.
I can't get this to work though. The buttons are working to make the slider move left and right, but for whatever reason i cant get the value to appear within the input field or change the heading. I've displayed the code i have already to get the buttons to move the slider and a snippet of what i thought would allow the changes i want to take place when the slider value changes to 2. I cant get it to to work though
Thanks.

You don't show your HTML, but I presume that slider is an input (text or hidden).
The value attribute is a string, even if you assign it a number, so you need to first convert it to a integer if you want to increment or decrement it, like so:
slider.value = parseInt(slider.value)++ // or --
Note that also you are trying to parseInt(2) down in your main(), which makes no sense as 2 is already an integer.

Javascript form calculations return NaN until last entry

JavaScript newbie.
I'm trying to create a simple calculator with displayed values that dynamically update as the user enters more info. My problem: The "rate" displayed in the green circle always displays as "NaN" until the user enters the final form value (all the values).
I tried using .value, parseFloat, etc. I'd be grateful for any suggestions or corrections--I know the JS isn't very elegant (and not working well, either).
JSFiddle here:
http://jsfiddle.net/thinkhuman/8ftuw/
Thanks!
UPDATE: A poster solved the NaN problem below, but the other half of the problem is: the "rate" value (in the green cirlce) doesn't update when the associated_costs and nonbillable values change. Any advice on that part?
<!--Web page for the JS app-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>What's My Rate?</title>
<!-- <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
--> <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="title">
<h1>What's My Rate?</h1>
<h3>Calculate your real-world freelance rate for web design/development.</h3>
</div>
<div class="calcwrapper">
<div class="entries">
<label for="targetsalary">Target salary (yearly):</label>
<input type="text" id="target_salary" name="targetsalary" onchange="calculate();">
<br />
<label for="associatedcosts">Associated costs (%):</label>
<input type="text" id="associated_costs" name="associatedcosts" onchange="calculate();">
<br />
<label for="timeoff">Time off (hours/year):</label>
<input type="text" id="timeoff" name="timeoff" onchange="calculate();">
<br />
<label for="nonbillable">Non-billable time (%):</label>
<input type="text" id="nonbillable" name="nonbillable" onchange="calculate();">
<br />
<label for="profit">Desired profit (%):</label>
<input type="text" id="profit" name="profit" onchange="calculate();">
</div>
<div class="ratedisplay">
<p class="rate" id="required_rate"></p>
<p class="ratesubtitle">per hour</p>
</div>
<div class="moreinfo">
<p>For a detailed explanation of why calculating your real-world rate is critical, see Neil Tortorella's excellent blog post on Teamtreehouse.com.</p>
</div>
</div>
<script src="whatsmyrate.js"></script>
</body>
</html>
The CSS:
body {
/* font-family: 'Nunito', sans-serif;
*/ color: #384047;
font-family: Arial,Helvetica, sans-serif;
}
.calcwrapper{
max-width: 700px;
height: 250px;
margin: 10px auto;
padding: 10px 10px;
background: #f4f7f8;
border-radius: 8px;
border: 2px solid black;
}
.entries{
max-width: 400px;
padding: 10px 20px;
float:left;
}
.ratedisplay{
background-color: #5fcf80;
float: right;
color: #fff;
height: 150px;
width: 150px;
font-size: 4.0em;
border: 1px solid #3ac162;
margin-right: 150px;
margin-bottom:30px;
line-height: 30px;
text-align: center;
border-radius: 100%;
box-shadow: 0 -5px 0 rgba(255,255,255,0.1) inset;
}
.ratesubtitle{
font-size: 0.4em;
color: black;
margin-top: 10px;
}
.rate{
color: #FFF;
text-align: center;
margin-bottom: 10px;
vertical-align:middle;
text-shadow: 0 3px 0 rgba(255,255,255,0.2);
}
.title{
margin: auto;
text-align: center;
}
input{
display: inline-block;
border: none;
margin-bottom: 5px;
margin-left: 20px;
max-width: 100px;
font-size: 18px;
height: auto;
/* margin: 0;
*/ outline: 0;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;
}
.moreinfo{
display:inline-block;
margin: auto;
text-align: center;
}
label{
display: inline-block;
float: left;
width: 200px;
text-align: right;}
...aaaand the JavaScript:
//A tool for calculating your real-world hourly rate for web design/development work.
/***************
PROCESS OVERVIEW
****************/
//1. Specify target_salary.
//2. Specify associated_costs %.
//3. Calculate new target_salary (target_salary + associated_costs).
//4. Specify time_off (holidays, vacation, sick days), and subtract from total_yearly_hours.
//5. Specify non-billable time, subtract from total hours.
//6. Calculate overhead % ((hourly_rate * overhead)+ hourly_rate)
//7. Specify profit %, and add to hourly_rate
/*********
VARIABLES
**********/
//target_salary
//associated_costs(%)
//total_required_salary = target_salary + associated_costs
//time_off = 176 hours (holidays 56, vacation 80 , sick days 40)
//non_billable_time = 25%
//overhead_costs(%)
//profit
//total_yearly_hours = 2080
//billable_hours = total_yearly_hours - (time_off + non_billable_time)
//required_rate = total_required_salary / billable_hours
//document.getElementById("required_rate").style.display='none';
function calculate() {
var total_yearly_hours = 2080;
// Get values for ALL elements on screen
var target_salary = document.getElementById("target_salary");
var associated_costs = document.getElementById("associated_costs");
var timeoff = document.getElementById("timeoff");
var nonbillable = document.getElementById("nonbillable");
var profit = document.getElementById("profit");
var required_rate = document.getElementById("required_rate");
// Get the user's input from the input elements.
var salary = parseFloat(target_salary.value);
var costs = parseFloat(associated_costs.value) / 100;
var vacation = parseFloat(timeoff.value);
var freehours = parseFloat(nonbillable.value);
var extra = parseFloat(profit.value) / 100;
// Compute the total required salary and billable hours.
var total_salary = (salary * (costs / 100)) + salary;
var billable_hours = total_yearly_hours - ((freehours/100)+vacation);
var rate = "$" + Math.floor(((total_salary * extra) + total_salary) / billable_hours);
//rate = total salary + profit, / billable hours.
// If the result is a finite number, the user's input was good
if (isNaN(rate)) {
required_rate.innerHTML = rate;
}
else{
required_rate.innerHTML = "";
}
}

In your condition you're getting a string, $NaN as you're doing
var rate = "$" + Math.floor(((total_sala ...
see how you add the dollarsign making it a string, and that's not NaN, it's a string
Remove the dollarsign
var rate = Math.floor(((total_sala ...
then do (note the condition is the wrong way around in your code)
if (isNaN(rate)) {
required_rate.innerHTML = "";
} else {
required_rate.innerHTML = '$' + rate;
}
comparing the actual number in the condition, and then adding the dollarsign
FIDDLE

Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row

Long-time pilferer, first-time poster.
I'm attempting to create an interactive internet-based GUI with specific features that mimics the control panel of a product of one of my clients, but haven't had much luck getting it to do exactly what I want. I know the answer is out there. I will do my best to describe what I am trying to achieve, without getting too wordy. Really, though, checking out the fork just explains it best.
What I want to do is be able to have the user select rows on a display — in this case the "display" is being rendered as an unordered list — by using html/css buttons. In addition to that, I want them to be able to increase and decrease the value in the text box. Here's the kicker: I want them to be able to increase and decrease the values ONLY when the text box is highlighted. The issue I'm having is I can't get each of the text boxes to increase and decrease; I can only get the first one to change. Hopefully that explanation is clear enough, but please, check out the Plunker to get the best understanding. It will be much clearer when you see it live.
I've made many different drafts/versions of this and have tried using tables, but this has gotten me the closest. Now I just need to get over the hump. I'm completely open to doing this a different way, but it seems like this just needs a tweak here or there to get it going. I had an idea as I was creating this post that might work and doesn't involve a unordered list or list items, and gets "creative" with margins and padding to execute the highlighting. I haven't tried that yet, though.
I tried setting this up on jsfiddle, but something in the way my code is written doesn't jive with their software, so I tried Plunker and it seemed to work. Either way, here's the fiddle: http://jsfiddle.net/brettroby/f5jrL/, and here's the Plunker: http://plnkr.co/edit/BMSh19?p=preview. If someone wants to go to work on that fiddle and let me know why it's not working, that would be appreciated; however, the Plunker is working just fine as-is.
I also have one other issue that is minor and can be discussed after the main issue is resolved.
Thanks to all for the help!
PS — thanks to all the code writers out there whose code I borrowed to get this far. I'd be dead in the water without stackoverflow.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}
li {
list-style-type: none;
line-height: 50px;
}
li:selected {
color: #000;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
var sel = document.getElementById('screen-container').getElementsByTagName('li');
SBoxPtr += amt;
if (SBoxPtr < 0) { SBoxPtr = 0; }
if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
for (var i=0; i<sel.length; i++) {
if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
else { sel[i].style.backgroundColor = '6799ea'; }
}
}
document.onkeyup = changeChars;
function changeChars(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode; // alert(KeyID);
if (KeyID == 187) { SBoxPrevNext(1); } // Key '+'
if (KeyID == 189) { SBoxPrevNext(-1); } // Key '-'
if (KeyID == 40) { SBoxPrevNext(1); } // Key 'DownArrow'
if (KeyID == 38) { SBoxPrevNext(-1); } // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}
</script>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>&#9650</div><div id="down"><p>&#9660</div>
<div id="left" onclick="decrementValue()"><p style="">◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
</body>
</html>

I have manged to fixed your code, and you can see the correct plunker here
The correction I have made are
Instead of:
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
I have fixed it to:
function incrementValue()
{
var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number'+ SBoxPtr).value = value;
}
And also changed the elements name from number to numberX
Original
<li>Program Line 1
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>
Fixed:
<li>Program Line 1
<input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>
Added id = number0 and numbered all other li's
if you find my answer helped you please mark it and press the UP key as well.
Thanks