output text color changes when value changes - javascript

Problem
I have a table that has inputs that the user enters values, JavaScript runs Calc. and displays the output value. To make the user experience better I would like to change the color of the text when the output changes based on the Calculations that JavaScript peforms. Is this possible?
My Effort
I have looked over the Internet and have not found anything other than when entering values into the input, never anything dealing with the output text.
Example Code
http://codepen.io/coryk/pen/rLGZYa
HTML
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>Input</td>
<td><input class="input_green" id="input" type="number" value="0"></td>
<td></td>
<td>Output</td>
<td><input class="input_yellow" id="output" readonly type="number" value="10"></td>
</tr>
</table>
</body>
JavaScript
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
$('#output').val(total);
}
foo();
document.getElementById("input").onchange = (function() {
foo();
});

You already have a class on the input. I suggest you set a default color for the text here via css and work from there. Yellow is difficult to see. I have used blue
If you run the snippet below, you will see that if you enter 1 in the first input box, the output is blue, but when you enter e.g. 4 or 5, as the result is over 10, the output is red.
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
if(total > 10){
$('.input_blue').css("color", "red");
}
$('#output').val(total);
}
foo();
document.getElementById("input").onchange = (function() {
foo();
});
.input_blue{color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
<td>Input</td>
<td><input class="input_green" id="input" type="number" value="0"></td>
<td></td>
<td>Output</td>
<td><input class="input_blue" id="output" readonly type="number" value="10"></td>
</tr>
</table>
</body>

Something like this?
var foo = function(){
var val = parseFloat($('#input').val());
var total = val * 3;
$('#output')
.val(total);
.css('color', 'rgb('+[(val^2)%256,(val*5)%256, (val%256)*2].join(',') +')')
}

Related

Not able to read entered number in javascript

I am just starting to use JavaScript and this seems to be really a beginner question. I am trying to make a web page where user can input a number and be able to square it. I have been able to write following code which shows the page with prompt and input fields, button to start calculation and an answer area:
<html>
<head>
<script>
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementByName("SNUM");
document.getElementById("answer_area").innerHTML = x * x;
}
</script>
</head>
<body>
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->
</body>
</html>
However, there is no response when the button is clicked. Where is the problem and how can this be solved. Thanks for your help.
Three things in this line
document.getElementsByName("SNUM")[0].value;
You need to get the element using index since getElementsByName gives a collection. Secondly you need to get the value so use value with it and thirdly there is a typo in your code
function calculate() {
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
<form>
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Enter a number: </td>
<td><input type="text" name="SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</u></b>
<p id="answer_area"></p>
<!-- answer to be placed here; -->
Simple, the problem is here:
var x = document.getElementByName("SNUM");
There is no method called getElementByName but rather:
getElementsByName("SNUM")
Change your code to:
<html>
<head>
<script>
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
</script>
</head>
<body>
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->
</body>
</html>
1) Use miss s in getElementsByName.
2) getElementsByName method return a NodeList Collection of elements so get first with [0].
3) For get value use of 'value' property.
So Change:
var x = document.getElementByName("SNUM");
To:
var x = document.getElementsByName("SNUM")[0].value;
function calculate(){
alert("In calculate fn") // NOT REACHING HERE;
var x = document.getElementsByName("SNUM")[0].value;
document.getElementById("answer_area").innerHTML = x * x;
}
<form>
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Enter a number: </td>
<td><input type = "text" name = "SNUM" /></td>
</tr>
</table>
</form>
<br>
<button onclick="calculate()">Square it</button>
<b><u><br><br>Answer:</b></u>
<p id="answer_area"></p> <!-- answer to be placed here; -->

Enable/ Disable for the textfield with same ID

I have two field named "Input1" and "Input2" with id as "inputID".
If I click "Input1" field,Input2 field to be disable.
And after reset, If I click "Input2" field,Text" Input1 should be disable.
I can able to achieve this by different id in javascript. But I need to get this with same id.
Can anyone please me on this?
<!DOCTYPE html>
<html>
<body>
<script>
function myFunc1() {
var input1 = document.getElementById("input1");
var input2= document.getElementById("input2");
if (input1.click){
document.getElementById("input2").disabled=true;
}
}
function myFunc2() {
var input1 = document.getElementById("input1");
var input2= document.getElementById("input2");
if (input2.click) {
document.getElementById("input1").disabled=true;
}
}
</script>
<table>
<tr>
<td>Field1: <input type="text" id="input1" onclick="myFunc1();" /></td>
</tr>
<tr>
<td>Field2 : <input type="text" id="input1" onclick="myFunc2();" /></td>
</tr>
</table>
</body>
</html>
Like I said in my comment, the id's should be unique, but if you insist on doing this the way you have it planned now, just get the elements by name since they are unique.
function myFunc1() {
var input1 = document.getElementsByName("input1");
var input2= document.getElementsByName("input2");
if (input1.click){
input2.disabled=true;
}
}
The answer above works, however if you want to make it really dynamic and clean, I'd make a function like this:
$("input[type=text]").click(function() {
$("input[type=text]").not(this).attr("disabled", true);
});
$("button#reset").click(function() {
$("input[type=text]").attr("disabled", false);
});
This targets all input[type=text] except the one you clicked. Pretty simple and very little code.
DEMO http://jsbin.com/kegasehagi/edit?html,js,console,output
Here is a WORKING FIDDLE for you in pure Jquery.
$(function(){
$('input[type=text]').click(function(){
$('input[type=text]').each(function(){
if(!($(this).is(":focus"))){
$(this).attr('disabled',true);
}
});
});
});
But, I would suggest you to keep IDs different and use class instead.
I hope, It will solve your purpose.
you can add more inputs with class name inpu and it will works.
Pure JavaScript:
<!DOCTYPE html>
<html>
<head><title>test page</title></head>
<body>
<table>
<tr>
<td>Field1: <input type="text" class='inpu' onclick="focusonly(this);" /></td>
</tr>
<tr>
<td>Field2 : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
</tr>
<tr>
<td>Field3 : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
</tr>
<tr>
<td>Field4 : <input type="text" class='inpu' onclick="focusonly(this);" /></td>
</tr>
<tr>
<td><button onclick='reset();'>reset</button></td>
</tr>
</table>
<script>
function reset(){
var inpu = document.getElementsByClassName("inpu");
for(var i=0;i<inpu.length;i++){
document.getElementsByClassName("inpu")[i].value = "";
document.getElementsByClassName("inpu")[i].disabled = false;
}
}
function focusonly(el){
var inpu = document.getElementsByClassName("inpu");
for(var i=0;i<inpu.length;i++){
document.getElementsByClassName("inpu")[i].disabled = true;
}
el.disabled = false;
}
</script>
</body>
</html>

javaScript multiply two numbers and show the result into third html input

I am trying to take a number from my html form and then multiply it with a number from my JavaScript function and displaying the result in another html input. Want I want is when the user click on the result input area then only the multiplication result shows.
<script type="text/javascript">
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = y * z;
document.getElementById("bill").innerHTML = x;
}
<table>
<tr>
<td>Total Kms Run</td>
<td><input type="text" id="km" name="km" required>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" id = "bill" name="bill" required onclick="myFunction()">
</tr>
</table
You're adding the numbers, not multiplying them :).
That aside, inputs don't have innerHTML, you need to set the value:
document.getElementById("bill").value = x;
Do Change like this
<script type="text/javascript">
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = y * z;
document.getElementById("bill").value = x;
}</script>
You have made many syntax mistakes in html
function myFunction() {
var y = document.getElementById("km").value;
var z = 14;
var x = Number(y) * Number(z);
document.getElementById("bill").value = x;
}
<table>
<tr>
<td>Total Kms Run</td>
<td><input type="text" id="km" name="km" required ></td>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" id="bill" name="bill" required onclick="myFunction()"></td>
</tr>
</table>

HTML - Invoice: How to add values to text field and calculate total

I was able to create the template, but I'm not sure what to do from here.
When I click my add item button, I want the values to go into the text area I created on the bottom and change the subtotal and total as I keep adding items.
<html>
<head>
<meta charset = "utf-8">
<h1>Invoice Manager</h1>
<style type "text/css">
div {position: absolute;
top: 200px;
left: 90px;
z-index: 1;}
</style>
<script type = "text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td align="right">Item Code:</td>
<td align="left"><input type="text" name="code" /></td>
</tr>
<tr>
<td align="right">Item Name:</td>
<td align="left"><input type="text" name="itemName" /></td>
</tr>
<tr>
<td align="right">Item Cost:</td>
<td align="left"><input type="text" name="cost" /></td>
</tr>
<tr>
<td align="right">Quantity:</td>
<td align="left"><input type="text" name="quantity" /></td>
</tr>
</table>
<div id="AddItemButton">
<td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
</div>
</form>
<br></br> <br></br>
<font size = "5">Current Invoice</font>
<hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>
<p><label> <br>
<textarea name = "textarea"
rows = "12" cols = "180"></textarea>
</label></p>
<form>
<table>
<tr>
<td align="right">Subtotal:</td>
<td align="left"><input type="text" name="subtotal" /></td>
</tr>
<tr>
<td align="right">Sales Tax:</td>
<td align="left"><input type="text" name="tax" /></td>
</tr>
<tr>
<td align="right">Total:</td>
<td align="left"><input type="text" name="total" /></td>
</tr>
</table>
</form>
<form>
<input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
</form>
That's what I have as a template. When I type in Item Code, Item Name, Item Cost and Quantity in those fields, I'd like those values to go in the text area on the bottom. I imagine I would need to write something in the script.
I'm not sure how to achieve this, but I was thinking that the first batch of info the user adds could equal a variable like a
Then the second values inputted could equal b
So let's say the user adds 3 items.
total = (a + b + c)
Or something like that.
Here's an example of what one "Add Item" would do. I'd like these submissions to appear in the text field I created like so
---Item Code--- ---Item Name--- ---Item Cost--- ---Quantity---
3 Dell 499 1
Any ideas on what I could do? I'm at a loss
Thanks
EDIT: I'm adding my script, I'm wondering if there's something wrong with it
<script type = "text/javascript">
function computeCost(){
var code = document.getElementById("code").value;
var a = code; // item code
var itemName = document.getElementById("itemName").value;
var b = itemName; // item name
var cost = document.getElementById("cost").value;
var c = cost; // calculate cost
var quantity = document.getElementById("quantity").value;
var d = quantity; // calculate quantity of items
var subtotal = document.getElementById("subtotal").value;
var e = c * d; // multiplying cost by quantity = subtotal
var tax = document.getElementById("tax").value;
var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed
var total = document.getElementById("total").value;
var g = f + e; //adding tax to subtotal = total value
document.getElementByID("yo").value = total;
}
function clear()
{
document.getElementById("a","b","c","d", "e", "f", "g").reset();
} // end of clear
</script>
I dont have much time to give a polished script, but this provides basic functionality
EDIT: added script tags and basic JQUERY things
note that because of loading JQUERY from the internet, it wont work without internet connection, if you wish to use it without internet con, download the script and link it locally
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type = "text/javascript">
$(function(){
var textContent = $('textarea').val();
var textRow = "";
$('input[type=submit]').click(function(){
$('input[type=text]').each(function(){
textRow = textRow+$(this).val()+'\t';
});
textContent = textContent + '\n' + textRow;
textRow = "";
$('textarea').val(textContent);
});
});
</script>
this is just the necessary JS and HTML, nothing fancy:
function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
val1 = parseInt(id("t1").value);
val2 = parseInt(id("t2").value);
id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}
<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>

JavaScript - Adding the new fields to existing ones

I am having a hard time with this homework.
Trying to keep adding the multiplication of the new 2 fields the user will add.
Example:
first field 5 second field 5 = total is 5*5 = 25
But when the user clicks the add field, he would have:
first field = 5 second field 5
first field = 6 second field 6 total would be 5*5 + 6*6 = 61 and so forth
<script>
function calc(form) {
var box1 = parseFloat (form.leftover.value,10)
var box2 = parseFloat (form.charge.value,10)
var temp = new Array();
var Mbalance = ( box1 * box2 ) ;
temp.push(Mbalance) ;
for ( var i=0; i< temp.length ; i++ ) {
Mbalance = Mbalance+Mbalance ;
}
form.mbalance.value= Mbalance ;
}
// This script is identical to the above JavaScript function.
var ct = 1;
function new_link(form) {
ct++ ;
var div1 = document.createElement('div');
div1.id = ct;
// Link to delete extended form elements
div1.innerHTML = document.getElementById('newlinktpl').innerHTML ;
document.getElementById('newlink').appendChild(div1);
}
</script>
</script>
<form>
<div id="newlink">
<div>
<td width="423">What was the balance left over from last month ?</td>
<td width="19">$</td>
<td width="141"><input name="leftover" value="" maxlength="10" /></td>
</tr>
<tr>
<td>How much did you charge this month ?</td>
<td>$</td>
<td><input name="charge" value="" maxlength="10" /></td>
<br/>
</div></div>
<button type="submit" id="buttoncalculate" onclick="calc(this.form); return false; "></button>
<br />
<td width="462">Monthly Balance</td>
<td width="128"><input name="mbalance" value="" maxlength="10" /></td>
Add new
</form>
<form>
<!-- Template -->
<div id="newlinktpl" style="display:none">
<div>
<td width="423">What was the balance left over from last month ?</td>
<td width="19">$</td>
<td width="141"><input name="leftover" value="" maxlength="10" /></td>
</tr>
<tr>
<td>How much did you charge this month ?</td>
<td>$</td>
<td><input name="charge" value="" maxlength="10" /></td>
</div>
</div>
<form>
Here's one way you can do it. It's not necessarily the best, but it achieves what you want and I don't feel like completely rewriting what you had:
http://jsfiddle.net/HS6dt/2/
I added a class to the parent div of your two inputs as well as your two inputs. That way I can find the parent div, then find the descendant inputs, get their values and multiple them (note: I have no idea why you are multiplying those two values, it really doesn't make much sense, but whatever):
function calc(form) {
var total = 0;
var items = document.getElementsByClassName("item");
for (var i = 0; i < items.length; i++) {
var left = items[i].getElementsByClassName("leftover");
var charge = items[i].getElementsByClassName("charge");
total += parseFloat(left[0].value, 10) * parseFloat(charge[0].value, 10);
}
form.mbalance.value = total;
}

Categories