create a counter that updates every second

create a counter that updates every second - javascript

I want to create a counter for my site, this is my cod,right now evry 1000 millisecond it increment 1 unit but i want that evry 1000 millisecond it increment todaycostsec ???
<html>
<script language="javascript">
sumcost=4000;
todaycost=500;
todaycostsec=(500)/86400;
var sum;
var Min;
Min=(sumcost-todaycost);
function incrementer() {
sum=(Min+todaycostsec);
document.time.heure.value=sum;
//document.time.result.value=sum;
}
function incrementer1() {
sum++;
//sum= Math.ceil(Min + ( todaycost* todaycostsec));
document.time.heure1.value=sum;
}
interv = setInterval("incrementer1()",1000);
</script>
<form name="time">
<input type="text" value="" name="heure" onclick="incrementer();"/>
<input type="text" value="" name="heure1" onclick="incrementer1();"/>
<div align="center">
<script language="JavaScript">
//document.write('<input style="FONT-WEIGHT: bold; bo ?rder: none; color:#CC0000 ; FONT-SIZE: 14pt; TEXT-ALIGN: center;" name=result size=30 value="incrementer()">');
</script>
</div>
</form>
</html>

Try
function incrementer1() {
sum += todaycostsec;
document.time.heure1.value=sum;
}

Related

how to Print out variable?

I'm really new to JS. I am working on the if else statement and returning the total using the button. I also want to return some other input from HTML file also using the same button or on the same function as my calculate function. How do I return the total amount, name(input), number(input), from html to that one button as well?
If you don't get my question please run the code and see that it is not printing out the other input value. Thank you for helping me out.
function calculate() {
var total
var kwh = parseFloat(document.getElementById("kw").value);
if (kwh <= 50) {
total = (kwh * 500);
} else if (kwh <= 100) {
total = kwh * 1000;
} else {
total = kwh * 2120;
}
document.getElementById("total").innerHTML = total;
}
<body>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input id="name" type="text" placeholder="ឈ្មោះអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="លេខអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="kwh" id="kw">
</div>
<button type="button" onclick="calculate()">គណនា</button>
<p>Result: <span id="total"></span></p>
<p>Name: <span id="name"></span></p>
<!-- <script src="script2.js"></script> -->
</body>

You are very close just need a few tweaks.
You shouldn't repeat ids, so in that case, to make it easier to understand, we can rename the input with id name to name_input, so you can retrieve its value as
document.getElementById('name_input').value
You can add that to your function and assign it to the innerHTML of name inside the function calculate() and so on with as many actions as you want
Working snippet:
function calculate() {
var total
var kwh = parseFloat(document.getElementById("kw").value);
if (kwh <= 50) {
total = (kwh * 500);
} else if (kwh <= 100) {
total = kwh * 1000;
} else {
total = kwh * 2120;
}
document.getElementById("total").innerHTML = total;
document.getElementById("name").innerHTML = document.getElementById("name_input").value;
}
<body>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input id="name_input" type="text" placeholder="ឈ្មោះអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="លេខអតិថិជន">
</div>
<div>
<label>ឈ្មោះអតិថិជន:</label>
<input type="number" placeholder="kwh" id="kw">
</div>
<button type="button" onclick="calculate()">គណនា</button>
<p>Result: <span id="total"></span></p>
<p>Name: <span id="name"></span></p>
<!-- <script src="script2.js"></script> -->
</body>

Multiply output by inputs

I'm trying to create a list based off of 2 input fields. The first input will be a name and the second an integer.
What I'm trying to achieve is having the name displayed multiplied by the amount of the input integer. I have got the name to display based off the input, but have been unable to have it displayed multiple times based on the input integer.
Here's an example image of what I'm looking to achieve
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
Fiddle: https://jsfiddle.net/grnct2yz/

<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="number" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
</body>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
for(let i = 0; i < document.getElementById("count").value; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
document.getElementById("name").value = ""; // clear the value
}
</script>
</html>
I have added a loop and changed the input type to number so we are sure that it's going to insert a number in the loop. Is this what you wanted?
What the code I added does is cycling a number of times equal to the number inputted and then executing the code you wrote.
for loops work this way:
you set an initial statement that is executed at the beginning of the loop, only once (let i = 0 sets a new iterable variable i),
then you set a condition that is checked before every iteration of the loop to make it run (i < document.getElementById("count").value checks that it executes up to and not more than X times, where X is the number inputted),
then you set an operation to be executed at the end of each loop (i++ increments the value of i by one).

Here is another way of doing it:
const name=document.getElementById("name"),
count=document.getElementById("count"),
list=document.getElementById("list");
document.getElementById("add").onclick = function() {
list.insertAdjacentHTML("beforeend",[...Array(+count.value)].map(s=>`<div>${name.value}</div>`).join(""))
name.value = ""; // clear the value
}
<input type="text" value="Michael" id="name" /><br>
<input type="text" value="5" id="count" /><br>
<input type="button" value="add to list" id="add" />
<div id="list"> </div>

Just your Improved code based on your needs we can achieve this in many ways.
<html>
<head>
<style>
input {
display: block;
}
#msgs {
margin-bottom: 24px;
}
</style>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<input type="text" value="Michael" id="name" />
<input type="text" value="5" id="count" />
<input type="button" value="add to list" id="add" />
<div id="list"> </div>
<script>
document.getElementById("add").onclick = function() {
var text = document.getElementById("name").value;
var count = document.getElementById("count").value;
if (parseInt(count) != 'NaN') {
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
count = parseInt(count);
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.textContent = text;
document.getElementById("list").appendChild(div);
}
}
}
</script>
</body>
</html>

How can I fix this simple mean calculator so it works and how can I make it so it takes as many numbers as I want?

I am making a mean calculator with HTML, JS, and Jquery. I wasn't sure how to retrieve the number of numbers that are entered so I came up with var numberOfNumbers = $('input').attr('class').length but I don't think it works. What is a better way to collect the number of numbers used to find the mean? Is there anything else wrong with my code? Also how can I make it so that I can enter as many numbers as I want and find the average of them? Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Find Average</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="meancalculator.js"></script>
</head>
<body>
<p>Number 1</p>
<input type="text" id="number1" class="numbers">
<p>Number 2</p>
<input type="text" id="number2" class="numbers">
<p>Number 3</p>
<input type="text" id="number3" class="numbers">
<button>Calculate</button>
<p>The mean is <span></span></p>
</body>
</html>
$(function () {
$('button').click(calculate)
})
var number1 = $('#number1').val()
var number2 = $('#number2').val()
var number3 = $('#number3').val()
var numberOfNumbers = $('input').attr('class').length
function calculate() {
var result = (number1 + number2 + number3) / numberOfNumbers
}
$('span').html(result)

Replace your following code :
var numberOfNumbers = $('input').attr('class').length
to:
var numberOfNumbers = $('.numbers').length

A couple of things:
You are taking input field values outside of calculate function. By that time numbers may not have entered. Same goes for displaying results. Move these lines inside calculate function.
Use $('input.numbers').length to get count of input elements having class numbers
Read the numeric values with + in prefix as +$('#number1').val()
Here is your modified code:
<!DOCTYPE html>
<html>
<head>
<title>Find Average</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="meancalculator.js"></script>
</head>
<body>
<p>Number 1</p>
<input type="text" id="number1" class="numbers">
<p>Number 2</p>
<input type="text" id="number2" class="numbers">
<p>Number 3</p>
<input type="text" id="number3" class="numbers">
<button>Calculate</button>
<p>The mean is <span></span></p>
</body>
</html>
<script>
$(function () {
$('button').click(calculate)
})
function calculate() {
var number1 = +$('#number1').val()
var number2 = +$('#number2').val()
var number3 = +$('#number3').val()
var numberOfNumbers = $('input.numbers').length
var result = (number1 + number2 + number3) / numberOfNumbers
$('span').html(result)
}
</script>

Another way to approach the problem is just to have one input into which the user can add a list of numbers to take the mean of:
$(function () {
$('button').click(calculate)
})
var number1 = $('#number1').val()
var number2 = $('#number2').val()
var number3 = $('#number3').val()
var numberOfNumbers = $('input').attr('class').length
function calculate() {
let numbers = $('#numbers').val().split(/[ ,]+/);
let sum = numbers.reduce((c, v) => c + parseInt(v), 0);
let result = sum / numbers.length;
$('span').html(result);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Enter a list of numbers separated by space or comma:</p>
<input type="text" id="numbers" class="numbers">
<button>Calculate</button>
<p>The mean is <span></span></p>

You can use $('input').each() for get inputs in the page and $(e).val() to get value of each element withing the each()
DEMO
$(function() {
$('button').click(calculate)
})
function calculate() {
let result = 0
$('input').each((i, e) => {
let val = parseInt($(e).val());
if (!isNaN(val)) {
result += val
}
})
$('span').html(result / $('input').length);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>Number 1</p>
<input type="text" id="number1" class="numbers">
<p>Number 2</p>
<input type="text" id="number2" class="numbers">
<p>Number 3</p>
<input type="text" id="number3" class="numbers">
<button>Calculate</button>
<p>The mean is <span></span></p>

Best case;
You can use "numbers" class for find it.
var numberOfNumbers = $.find('.numbers').length;
Worst case;
If you think you will use "number" class for something else, you can add an data attribute for numbers such as;
<input type="text" id="number1" class="numbers" data-bla-bla="numbers">
and find specified data attribute;
var numberOfNumbers = 0;
$.each($.find('.numbers'),function(a,b) { if ($(b).attr('data-bla-bla') != undefined && $(b).attr('data-bla-bla') == 'numbers') { numberOfNumbers++; } });

I think what you want is something dynamic like this :)
var count = 1,
total = 0,
mean = 0;
$(document).on('click', '#addNewField', function() {
var containerDiv = document.createElement('div');
containerDiv.className += "inputWrapper";
var inputField = document.createElement('input');
inputField.setAttribute('type', 'number');
inputField.className += 'number';
containerDiv.append(inputField);
var deleteSpan = document.createElement('span');
deleteSpan.className += 'delete';
inputField.after(deleteSpan);
$('#fields').append(containerDiv);
inputField.focus();
count++;
$('#count').text(count);
});
$(document).on('keyup', '.number', function() {
calculate();
});
function calculate() {
total = 0;
mean = 0;
$('.number').each(function() {
total += parseFloat($(this).val());
mean = total / count;
});
$('#total').text(total);
$('#mean').text(mean);
}
$(document).on('click', '.delete', function() {
$(this).parent().remove();
count--;
$('#count').text(count);
calculate();
});
.inputWrapper {
position: relative;
}
.number {
width: 200px;
height: 30px;
line-height: 30px;
font-size: 24px;
padding-left: 30px;
margin: 5px 0;
display: block;
}
table td {
text-align: center;
}
input.number+*:after {
content: "×";
font-size: 32px;
top: 0;
left: 5px;
position: absolute;
}
#addNewField {
height: 30px;
width: 235px;
margin: 10px 0 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="fields">
<div class="inputWrapper">
<input type="number" class="number"><span class='delete'></span>
</div>
</div>
<button id="addNewField">+ Add New Field</button>
<table border="1px" cellPadding="10px">
<tr>
<th>Count</th>
<th>Total</th>
<th>Mean</th>
</tr>
<tr>
<td id="count">1</td>
<td id="total">0</td>
<td id="mean">0</td>
</tr>
</table>

How to increase and decrease a text value with two buttons

I'm trying to increase a text value using two buttons, one on each side of the text, which either increase the value by 10 or decrease it by 10, and the value can't go under 10km or over 90km.
Here is the app screen so you can see what I mean:
Update: I've now been given code to work with but it doesn't have the "km" value after the number so it goes 10,20,30 instead of 10km, 20km, 30km. Does anyone know how to adjust this code to do what I want?
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number').val() !="90"){
var $n = $("#number");
$n.val(Number($n.val())+10);
}
});
$("#decrement").click(function(){
if($('#number').val() !="10"){
var $n = $("#number");
$n.val(Number($n.val())-10);
}
});
});
</script>
</head>
<style>
.Radius{
font-size:14px;
font-family:"gillsans";
color: #4361AD;
text-align: center;
}
</style>
<body>
<div id="Maincontainer">
<input type="text" value="10" id="number" class="Radius" style="background-color:transparent; border:0px solid white; width:110px; margin-left:15px;"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</div>
</body>
https://jsfiddle.net/deepanv29/4b7adopb/

<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div>
<body>
<input type="text" value="10Km" id="number"/>
<input type="hidden" value="10" id="number1"/>
<input type="button" id="increment" value="Increment"/>
<input type="button" id="decrement" value="decrement"/>
</body>
</div>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
$("#increment").click(function(){
if($('#number1').val() !="90"){
var $n = $("#number1");
$n.val(Number($n.val())+10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
$("#decrement").click(function(){
if($('#number1').val() !="10"){
var $n = $("#number1");
$n.val(Number($n.val())-10);
var value = $n.val();
$("#number").val(value +'Km');
}
});
});
</script>
</body>
</html>
updates Js fiddle demo for the above code

you just need to increment and decrement the value at button click.
int value = 10;
protected void BtnIncre_Click(Object sender, EventArgs e)
{
if (value < 90)
{
value += 10;
Session["Value"] = value;
}
}
protected void BtnDecre_Click(Object sender, EventArgs e)
{
if (value > 10)
{
value -= 10;
Session["Value"] = value;
}
}

<!DOCTYPE>
<html>
<head>
</head>
<body>
<input type="button" id="dec" value="DEC" onclick="dec();">
<input type="text" id="Number_value" value="0" readonly>
<input type="button" id="inc" value="INC" onclick="inc();">
<script language='javascript' type='text/javascript'>
function inc()
{
var val = parseInt(document.getElementById('Number_value').value);
val+=10;
if(val>90) val = 90;
document.getElementById('Number_value').value = val;
}
function dec()
{
var val = parseInt(document.getElementById('Number_value').value);
val-=10;
if(va<10) val = 10;
document.getElementById('Number_value').value = val;
}
</script>
</body>
</html>

If statement doesnt work? Javascript

I have two textboxes and one button. I putt numbers in the first textbox and press the button to add the number to a total which is displayed in the second box, till it reaches 1000. But the if statement doesn't work for some reason.
This works fine:
<html>
<title>Ask7</title>
<script>
var total=0;
function calculate()
{
var box1;
box1=parseFloat(document.getElementById("box1").value);
total=total+box1;
document.getElementById("box2").innerHTML="";
document.getElementById("box2").value=total;
}
</script>
<body>
<h3>Give num:</h3>
<input id="box1" type="text"></input>
<button onclick="calculate()" type="button">ADD</button>
<br>
<h3>Total:</h3>
<input id="box2" readonly="readonly" type="text"></input>
</body>
</html>
This doesn't:
<html>
<title>Ask7</title>
<script>
var total=0;
function calculate()
{
if(total<1000)
{
var box1;
box1=parseFloat(document.getElementById("box1").value);
total=total+box1;
document.getElementById("box2").innerHTML="";
document.getElementById("box2").value=total;
}
else
{
alert("OVER 1000!");
break;
}
}
</script>
<body>
<h3>Give num:</h3>
<input id="box1" type="text"></input>
<button onclick="calculate()" type="button">ADD</button>
<br>
<h3>Total:</h3>
<input id="box2" readonly="readonly" type="text"></input>
</body>
</html>
Basically I don't get why the if statement doesn't work.

Remove the break, it doesn't belong there.
I think you should have your code like this:
var total = 0;
function calculate() {
var box1;
box1 = parseFloat(document.getElementById("box1").value);
total = total + box1;
box2 = document.getElementById("box2");
box2.value = total;
if (total < 1000) {
// do something
} else {
alert("OVER 1000!");
// break;
box2.value = 0; // to clean the value after 1000
}
}
Demo

...
else {
alert("OVER 1000!");
box2.value = 0; // to clean the value after 1000
total = 0; // **** also reset the global var for reuse as still adding over 1000
}

Develop Reference

JavaScript is the programming language of the Web.

create a counter that updates every second - javascript

Try function incrementer1() { sum += todaycostsec; document.time.heure1.value=sum; }

Related

how to Print out variable?

Multiply output by inputs

How can I fix this simple mean calculator so it works and how can I make it so it takes as many numbers as I want?

How to increase and decrease a text value with two buttons

If statement doesnt work? Javascript

Categories

Resources