Develop Reference

How to properly link basic calculator results to buttons? (failing to do so)

I'm new to javascript, this week was our second lesson that came with an assignment. Disclaimer: I have a learning disability so sorry ifgot the solution is really obvious.
Alright so in the first lesson we have to create a basic calculator with input fields, this went great, followed along with the teacher and thought I understood it. - Second lesson was making the calculator work with buttons instead.
This is what I came up with:
function insert(num) {
document.form.textview.value = document.form.textview.value + num
}
var result = document.getElementById('result');
result.addEventListener('click', function(number1, number2) {
var a = number1;
var b = number2;
var op = (document.querySelector("#operator").value);
var calculate;
if (op == "add") {
calculate = a + b;
} else if (op == "min") {
calculate = a - b;
} else if (op == "divi") {
calculate = a / b;
} else if (op == "mul") {
calculate = a * b;
}
});
<form name="form">
<input type="text" name="textview">
</form>
<div id="operator">
<br>
<button onclick="insert(7)">7</button>
<button onclick="insert(8)">8</button>
<button onclick="insert(9)">9</button>
<button onclick="insert('/')" id="divi"> / </button>
<br>
<button onclick="insert(4)">4</button>
<button onclick="insert(5)">5</button>
<button onclick="insert(6)">6</button>
<button onclick="insert('*')" id="mul"> * </button>
<br>
<button onclick="insert(1)">1</button>
<button onclick="insert(2)">2</button>
<button onclick="insert(3)">3</button>
<button onclick="insert('-')" id="min"> - </button>
<br>
<button onclick="insert('C')"> C </button>
<button onclick="insert(0)"> 0 </button>
<button onclick="insert('')" id="result"> = </button>
<button onclick="insert('+')" id="add"> + </button>
</div>
Result: All buttons work and input the numbers but it seems to not connect with my function.
First I checked console log for errors but it doesn't give any. Then I asked my teachers and he said we're only allowed to use what we learned in the first 2 lessons, so i'm trying to stick with it but really have no clue what I did wrong here. Any help would be appreciated very muchthanks all!

Here is a sample code that can solve your problem. What is happening in this is.
Whenever you select anything from the keys check if its not a number using isNaN()
If its is not a number the add a space after and before it when inserting into the textbox
document.form.textview.value = document.form.textview.value + ' ' + num + ' ';
When the result button (=) is clicked get the value of the textbox
var operands = equation.split(' ');
Now you will have an array (operands) of 3 items which will have first item as the first number, second item as the operation and the third item as the second number.
Now you can operate accordingly. Below is a working snippet for the above solutions.
function insert(num) {
if (isNaN(num)) {
document.form.textview.value = document.form.textview.value + ' ' + num + ' '; // add a space after and before the operator
} else {
document.form.textview.value = document.form.textview.value + num;
}
}
var result = document.getElementById('result');
result.addEventListener('click', function() {
var equation = document.getElementById('equation').value;
var operands = equation.split(' '); // split the string by space which give you and array of 3 elements
var op = operands[1];
var a = operands[0];
var b = operands[2];
var calculate;
if (op == "+") {
calculate = a + b;
} else if (op == "-") {
calculate = a - b;
} else if (op == "/") {
calculate = a / b;
} else if (op == "*") {
calculate = a * b;
}
console.log('Result is: ' + calculate);
});
<form name="form">
<input type="text" id="equation" name="textview">
</form>
<div id="operator">
<br>
<button onclick="insert(7)">7</button>
<button onclick="insert(8)">8</button>
<button onclick="insert(9)">9</button>
<button onclick="insert('/')" id="divi"> / </button>
<br>
<button onclick="insert(4)">4</button>
<button onclick="insert(5)">5</button>
<button onclick="insert(6)">6</button>
<button onclick="insert('*')" id="mul"> * </button>
<br>
<button onclick="insert(1)">1</button>
<button onclick="insert(2)">2</button>
<button onclick="insert(3)">3</button>
<button onclick="insert('-')" id="min"> - </button>
<br>
<button onclick="insert('C')"> C </button>
<button onclick="insert(0)"> 0 </button>
<button onclick="insert('')" id="result"> = </button>
<button onclick="insert('+')" id="add"> + </button>
</div>
Read more about
.split()
isNaN()
There can be many more solutions to this using different ways. Try and explore. Good luck with your learning.
Hope this helps :)

Forward and Back Buttons react where the Caret Position is

Playing with the idea of a Keypad-Login.
I need to make Forward and Back Buttons.
The back and forward buttons seem to be getting the caret position.
The input is disabled and only button clicks are used.
How can I adjust the buttons A and B to not just type at the end of the value but place the letter where the caret position is?
function A(){ document.getElementById('user').value += "A"; }
function B(){ document.getElementById('user').value += "B"; }
function BackSpace(){document.getElementById('user').value=document.getElementById('user').value.substring(0,document.getElementById('user').value.length - 1);}
function Back(){
user.focus();
console.log(user.selectionStart-1);
if(user.selectionStart > 0 ){user.focus();
user.selectionEnd = user.selectionStart-1;
user.selectionStart = user.selectionStart;}}
function Forward(){
console.log(user.selectionStart);
user.focus();
user.selectionEnd = user.selectionStart+1;
user.selectionStart = user.selectionStart+1;}
<div>
<button type="button" id="userKeysIn">
<span class="">Username</span>
<input id="user" disabled="disabled" type="text" name="user">
</button>
</div>
<div>
<button type="button" onclick="A();">a</button>
<button type="button" onclick="B();">b</button>
<button type="button" onclick="BackSpace();">Backspace</button>
<button type="button" onclick="Back();">Back</button>
<button type="button" onclick="Forward();">Forward</button>
</div>
No JQuery Please.
And Thank You in Advance!

I used selectionStart and selectionEnd to check caret position
Here is something you are looking for
String.prototype.replaceBetween = function(start, end, what) {
return this.substring(0, start) + what + this.substring(end);
};
function writeValue(value) {
var userInput = document.getElementById('user');
var inputValue = document.getElementById('user').value;
if (userInput.selectionStart === userInput.selectionEnd) {
inputValue = inputValue.substring(0, userInput.selectionStart) + value + inputValue.substring(userInput.selectionStart, inputValue.length);
} else {
inputValue = inputValue.replaceBetween(userInput.selectionStart, userInput.selectionEnd, value);
}
document.getElementById('user').value = inputValue;
}
function A(){
writeValue("A");
}
function B(){
writeValue("B");
}
See the codepen

Button without using form/submit buttons and updating info

new here. Currently lost at my programming. I can't seem to make use of buttons in my page. I want to update my contents once I pressed any of the two button. Here's where I'm stuck at:
var value = 1; //set default to 1
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onClick = function()
{
value = 1;
}
button2.onClick = function()
{
value = 2;
}
<button type="button" class="btn btn-default btn-md" value="1" id="button1">Store 1</button>
<button type="button" class="btn btn-success btn-md" value="2" id="button2">Store 2</button>
<!-- the following lines are under td of a table -->
<tr>
<script type="text/javascript">
if (value == 1)
{
coolerName = "Corsair H100i v2";
coolerPrice = 5440;
}
if (value == 2)
{
coolerName = "Corsair H100i v2";
coolerPrice = 5450;
}
document.write("<td>" + coolerName + "</td>");
document.write('<td id="alignRight">');
if (coolerPrice > 0)
{
document.write(coolerPrice.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
}
else
{
document.write(coolerPrice.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
}
document.write('</td>');
</script>
</tr>
Do I need to do AJAX here, or JScript is good?

function to increment / decrement more than stepper in javascript

Hello I am trying to rewrite a function that will increment / decrement more than 1 stepper in javascript. Here is what I tried so far
here is a codepen link http://codepen.io/Ongomobile/pen/XdyBgv/
Here is 1 of the steppers
<div class="qtyDiv">
<label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
<input class="qtyInput" id="qty1" value="0" name"one" />
<!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
<button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
<button class=" tallyBtn" id="down" onclick="stepperVal("one",-1)">-1</button>
<button class="tallyBtn"id="up" onclick="stepperVal("one",1)">+1</button>
</div>
// This is current one
function modify_qty(val) {
var qty = document.querySelector("#qty1").value;
var new_qty = parseInt(qty,10) + val;
if (new_qty < 0) {
new_qty = 0;
}
document.querySelector("#qty1").value = new_qty;
return new_qty;
}
This is what I tried
function stepperVal(name,val){
var qty = 0;
var new_qty = parseInt(qty,10) + val;
if (new_qty < 0) {
new_qty = 0;
}
[name].value = new_qty;
return new_qty;
}

A few issues:
What's the purpose of this line parseInt(qty,10) + val;? parseInt is intended to convert a string into its equivalent digit. Not much point in calling it on a base10 number.
Not sure what the point of the name argument to stepperVal is. Isn't the amount to be stepped already implied by the value argument?
You can pass a reference to the object triggering the onclick event by passing this to your function declared within the onclick.
new_qty always evaluates to val
stepperVal(arg,-1) is actually the same as stepperVal(arg,0). Why not just call it that way?
Updated code
replace "one" with this in :
<div class="qtyDiv">
<label class="qtyLabel" for="qty1 " name"one"><abbr title="Quantity">Qty</abbr></label>
<input class="qtyInput" id="qty1" value="0" name"one" />
<!-- <button class=" tallyBtn" id="down" onclick="modify_qty(-1)">-1</button>
<button class="tallyBtn"id="up" onclick="modify_qty(1)">+1</button> -->
<button class=" tallyBtn" id="down" onclick="stepperVal(this,-1)">-1</button>
<button class="tallyBtn"id="up" onclick="stepperVal(this,1)">+1</button>
</div>
Simplified JS:
function stepperVal(event, val){
clicked_link = event.target
return clicked_link.value = Math.max(0, val); # Return the greater of 0 and `val`
}

Use following it must work:
function stepperVal(name,val){
var qty = 0;
var new_qty = parseInt(document.getElementsByName(name),10) + val;
if (new_qty < 0) {
new_qty = 0;
}
document.getElementsByName(name).value = new_qty;
return new_qty;
}

JQuery: How do I STOP the value in the text box going into negative numbers for this example?

I'm new to Javascript and I've picked up some basics already, however I'm trying to figure out how I can stop the text value decrementing past 0 in this specific example: http://codepen.io/anon/pen/ZYjeJb
Do I have to change the conditional statement in some way?
<div id="text">Number of items:<span id="number">9</span><div>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
<button onclick="javascript:add(-1)">remove only 1</button>
var currentValue = 9;
var add = function(valueToAdd){
currentValue += valueToAdd;
document.getElementById('number').innerHTML = currentValue;
if (this.currentValue == 0) {
alert("YOU ARE AT 0 ");
}
if (!isNaN(currentValue) && currentValue > 0) {
// Decrement one
currentValue - 1;
} else {
return false;
}
};

You need to check the current value for zero before setting the 'valueToAdd'
var currentValue = 9;
var add = function(valueToAdd){
if (this.currentValue == 0) {
alert("YOU ARE AT 0 ");
return
}
currentValue += valueToAdd;
document.getElementById('number').innerHTML = currentValue;
if (!isNaN(currentValue) && currentValue > 0) {
// Decrement one
currentValue - 1;
} else {
return false;
}
};

The line that actually changes your value is this one
currentValue += valueToAdd;
So, if you check the value thats going to be inserted to currentValue before changing it, you could stop the function execution and prevent it from being updated:
function(valueToAdd){
var temp = currentValue + valueToAdd; // calculating the next value
if (temp < 0)
return; // if its a negative value, exit from the function without updating currentValue
currentValue = temp;
// other code
}
Check this codepen

Don't decrement currentvalue before you check it!
var add = function(valueToAdd){
if (this.currentValue == 0) {
alert("YOU ARE AT 0 ")}
else{
currentValue += valueToAdd;
document.getElementById('number').innerHTML = currentValue;}
}