i want to output the javascript dayz variable into the results div, but its not outputting anything, when i try alert(dayz) after the calculation it does, but i want it to output the dayz variable the html.
..help
<html>
<head>
<title>My first JavaScript page</title>
<script type="text/javascript">
var calculation = function(){
//days
var hours = document.getElementById("hours_id").value;
var d = 10000/hours;
var da = 1000%hours;
var dayz = d.toFixed(0);
dayz = parseInt(dayz, 10);
dayz = dayz + da;
//years
var years = days/365;
years = years.toFixed(2);
//weeks
var weeks = days/7;
weeks = weeks.toFixed(2);
};
document.getElementById('results').innerHTML=dayz;
</script>
</head>
<body>
<form name="input">
<input type="text" id="hours_id" name="hours_id">
<input type="button" id="submit" value="calculate" onClick="calculation()">
</form>
<div id="results"> </div>
</body>
</html>
Try this
function calculation(){
//days
var hours = document.getElementById("hours_id").value;
var d = 10000/hours;
var da = 1000%hours;
var dayz = d.toFixed(0);
dayz = parseInt(dayz, 10);
dayz = dayz + da;
//years
var years = dayz/365;
years = years.toFixed(2);
//weeks
var weeks = dayz/7;
weeks = weeks.toFixed(2);
document.getElementById('results').innerHTML=dayz;
};
DEMO
Put the following statement inside the function definition:
document.getElementById('results').innerHTML = dayz;
like this:
var calculation = function () {
//days
var hours = document.getElementById("hours_id").value;
var d = 10000 / hours;
var da = 1000 % hours;
var dayz = d.toFixed(0);
dayz = parseInt(dayz, 10);
dayz = dayz + da;
//years
var years = dayz / 365;
years = years.toFixed(2);
//weeks
var weeks = dayz / 7;
weeks = weeks.toFixed(2);
document.getElementById('results').innerHTML = dayz;
};
Related
I have a simple form for readers to add comments. The comments entered are listed on the website when added. I would like to register the date the comment was entered and list that underneath the comment itself, as shown on the website. Can someone assist me with the JS code for this?
Thanks, Paul
const field = document.querySelector('textarea');
const comments = document.getElementById('comment-box');
// array to store the comments
var comments_arr = [];
if(!localStorage.commentData){localStorage.commentData = [];}
else{
comments_arr = JSON.parse(localStorage.commentData);
}
// to generate html list based on comments array
const display_comments = () => {
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment}</li>`;
})
list += '</ul>';
comments.innerHTML = list;
}
submit.onclick = function(event){
event.preventDefault();
const content = field.value;
if(content.length > 0){ // if there is content
// add the comment to the array
comments_arr.unshift(content);
localStorage.commentData = JSON.stringify(comments_arr);
// re-genrate the comment html list
display_comments();
// reset the textArea content
field.value = '';
}
}
window.addEventListener('load', display_comments);
<link href="comment.css" rel="stylesheet">
<form>
<textarea id="comment" placeholder="Your response pls." value=""></textarea>
</form>
<input id="submit" type="submit" value="add">
<h4>Responses</h4>
<div id="comment-box"></div>
<script src="comment.js"></script>
if you only want date stamp then remove the var current_time from the display_comments() function.
const display_comments = () => {
var date = new Date();
var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
var current_time = date.getHours()+":"+date.getMinutes()+":"+ date.getSeconds();
var date_time = current_date+" "+current_time;
let list = '<ul>';
comments_arr.forEach(comment => {
list += `<li>${comment} created at : ${date_time}</li>`;
})
list += '</ul>';
comments.innerHTML = list;
}
let textbox=document.getElementById("textbox")
let comments=document.getElementById("comments")
let add=()=>{
let value=textbox.value
let ul=document.getElementById("ul")
let list=document.createElement("li")
var date = new Date();
var current_date = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
var date_time = current_date+" "+strTime;
list.innerHTML=`comment:${value}`+" "+`Created At:${date_time}`
ul.insertBefore(list,ul.firstElementChild)
textbox.value=""
}
<textarea id="textbox" placeholder="Your response pls." value=""></textarea>
<button id="btn" onclick="add()">Add</button>
<div id="comments">
<h4>Responses</h4>
<ul id="ul"></ul>
</div>
I'm working on a project where I need to manipulate time speed forward and backward. This module seems like what I need but I can't get it working:
https://github.com/mattbradley/warpjs/blob/master/README.md
Any help appreciated
<html>
<head>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="warp.js"></script>
<div id="container"></div>
<span id="info"></span><br>
<span id="time"></span>
<span id="time2"></span>
<script>
setInterval(function() {
var now = new Date;
now = Date.warp.clock(true);
//now = Date.warp.speed(2); // DOESNT WORK?
var dateD = [now.getMonth() + 1,now.getDate(),now.getFullYear()];
var dateE = [now.getHours(),now.getMinutes(),now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 20);
</script>
</body>
</html>
The wrap is a static method, it doesn't return any value(undefined is returned)
setInterval(function() {
Date.warp.speed(3);
var now = new Date;
var dateD = [now.getMonth() + 1, now.getDate(), now.getFullYear()];
var dateE = [now.getHours(), now.getMinutes(), now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 1000);
Demo: Fiddle
Somehow I can't create external javascript files. If I import them from other examples, they work fine but if it is files I create and import them, they don't work. They are working fine if I inclued them into the html but if I reference them they don't work. I don't know what I am doing wrong.
Here's my html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sem tÃtulo</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<body>
<script type="text/javascript" src="horario.js"></script>
<div id="entrada">
<input id="time" class="inputs" type="text" maxlength="2"></input>
<input id="time2" class="inputs" type="text" maxlength="2"></input>
<button class="inputs" id="confirm_button" class="inputs1" onKeyPress="localStore()" onClick="localStore()">entrada</button>
</div>
<div id="result"></div>
<div id="millsentr"></div>
<div id="millssai"></div>
<div id="mills"></div>
<div id="totHoras"></div>
</body>
</html>
And here's the javascript file:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(".inputs1").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
$(document).ready( function() {
$("#confirm_button").click( function() {
jConfirm('Can you confirm this? ', 'Confirmation Dialog', function(r) {
var entradasaida = 0;
entradasaida = localStorage.getItem("entradasaida");
if(r == true){
if(entradasaida == 0){
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var mills = date.getTime();
localStorage.setItem("horas", time);
localStorage.setItem("mins", time2);
localStorage.setItem("entradasaida",1);
localStorage.setItem("millsEnt",mills);
$('#confirm_button').text("Saida");
$('#time, #time2').val("");
$('#millsentr').text(mills);
} else{
var horasEnt = localStorage.getItem("horas");
var minsEnt = localStorage.getItem("mins");
var entrada = localStorage.getItem("millsEnt");
localStorage.setItem("entradasaida",0);
$('#confirm_button').text("Entrada");
var time = $('#time').val();
var time2 = $('#time2').val();
var datetime = new Date();
var year = datetime.getFullYear();
var month = datetime.getMonth()+1;
if(month < 10){
month = "0"+month
}
var day = datetime.getDay()+1;
if(day < 10){
day = "0"+day
}
var date1 = new Date(year+"-"+month+"-"+day+" "+time+":"+time2);
var millssai = date1.getTime();
$('#millssai').text(millssai);
var totMills = (millssai - entrada)
var horas = time - horasEnt;
var mins = time2 - minsEnt;
if(mins < 0){
mins = mins*(-1);
horas = horas-1;
}
var totHoras = horas+":"+mins
$('#totHoras').text(totHoras);
$('#mills').text(totMills);
$('#time, #time2').val("");
}
} else{r == false}
});
});
});
In this, the horario.js is the file I created and is not working, the other script files I used from examples are working ok.
I have some problem to get value from input field. Some input field is a result from calculation process, such as #t1_potensi and #t2_potensi. While #aliran is the result of the overall calculation process.
This is my HTML code.
<input oninput="hitung()" name="v_potensi" id="v_potensi" type="text" placeholder="liter . . ." />
<input oninput="hitung()" name="a_potensi" id="a_potensi" type="text" placeholder="menit . . ." />
<input oninput="hitung()" name="b_potensi" id="b_potensi" type="text" placeholder="menit . . ." />
<input oninput="hitungT1()" name="kecepatan_air" id="kecepatan_air" type="text" placeholder="km/jam . . ." />
<input oninput="hitungT1()" name="jarak1" id="jarak1" type="text" placeholder="kilometer . . ." />
<input oninput="hitungT2()" name="kecepatan_back" id="kecepatan_back" type="text" placeholder="km/jam . . ." />
<input oninput="hitungT2()" name="jarak2" id="jarak2" type="text" placeholder="kilometer . . ." />
<!-- #t1_potensi = 0.65 + ((60 / #kecepatan_air) * #jarak1) -->
<input readonly="readonly" oninput="hitung()" name="t1_potensi" id="t1_potensi" type="text" placeholder="menit . . ." />
<!-- #t2_potensi = 0.65 + ((60 / #kecepatan_back) * #jarak2) -->
<input readonly="readonly" oninput="hitung()" name="t2_potensi" id="t2_potensi" type="text" placeholder="menit . . ." />
<!-- #aliran = (#v_potensi / (#a_potensi + #b_potensi + #t1_potensi + #t2_potensi)) - 0.1 -->
<input readonly="readonly" name="aliran" id="aliran" type="text" placeholder="liter/menit . . ." />
I use javascript to do the calculation process, to get a result for #t1_potensi and #t2_potensi. My problem start when i try to calculate overall (#aliran), my javascript function in particular to obtain the overall result can not work properly. Here my javascript for #t1_potensi, #t2_potensi, and #aliran.
//To get #t1_potensi
function hitungT1() {
var kecKm = document.getElementById('kecepatan_air').value;
var d1 = document.getElementById('jarak1').value;
var result = document.getElementById('t1_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d1 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #t2_potensi
function hitungT2() {
var kecKm = document.getElementById('kecepatan_back').value;
var d2 = document.getElementById('jarak2').value;
var result = document.getElementById('t2_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d2 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #aliran
function hitung() {
var vol = document.getElementById('v_potensi').value;
var a = document.getElementById('a_potensi').value;
var b = document.getElementById('b_potensi').value;
var t1 = document.getElementById('t1_potensi').value;
var t2 = document.getElementById('t2_potensi').value;
var hasil = document.getElementById('aliran');
//convert liter to galon
var galon = Math.round(vol * 0.264172051);
var sumT = t1 + t2;
var sum = a + sumT + b;
var dev = galon / sum;
var result = Math.round(dev - 0.1);
hasil.value = result;
}
Does anyone can help me to solve my problem? or maybe make my javascript function more efficient. thanks.
Use parseFloat() on the numbers you're getting with document.getElementById('...').value:
//To get #t1_potensi
function hitungT1() {
var kecKm = parseFloat(document.getElementById('kecepatan_air').value);
var d1 = parseFloat(document.getElementById('jarak1').value);
var result = document.getElementById('t1_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d1 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #t2_potensi
function hitungT2() {
var kecKm = parseFloat(document.getElementById('kecepatan_back').value);
var d2 = parseFloat(document.getElementById('jarak2').value);
var result = document.getElementById('t2_potensi');
//convert Km/jam to mph
var kecMph = Math.round(kecKm * 0.621371192);
//convert liter to miles
var d1Miles = d2 * 0.621371192;
var x = 60 / kecMph;
var kali = x.toFixed(1) * d1Miles.toFixed(2);
var hasil = 0.65 + kali;
result.value = hasil.toFixed(2);
}
//To get #aliran
function hitung() {
var vol = parseFloat(document.getElementById('v_potensi').value);
var a = parseFloat(document.getElementById('a_potensi').value);
var b = parseFloat(document.getElementById('b_potensi').value);
var t1 = parseFloat(document.getElementById('t1_potensi').value);
var t2 = parseFloat(document.getElementById('t2_potensi').value);
var hasil = document.getElementById('aliran');
//convert liter to galon
var galon = Math.round(vol * 0.264172051);
var sumT = t1 + t2;
var sum = a + sumT + b;
var dev = galon / sum;
var result = Math.round(dev - 0.1);
hasil.value = result;
}
Also, it's a bit tricky to me why you call the hitung() function only after editing one of the first three text boxes. Why not call all three functions every time any field is changed? Wouldn't that be better?
Up to you. Also, after you've placed parseFloat calls like above, please use console.log(string or variable to log), e.g. console.log('dev is: ' + dev). That way you can easily debug your code - see what all the values are during any calculation.
Also, do you really need to round the final result?
This question already has answers here:
How to calculate number of days between two dates?
(42 answers)
Closed 9 years ago.
This script counts the days between two dates and shows the result on a span element:
<span id="result"></span>
But instead I want to show the result as value of an input element:
<input name="name" type="text" id="name" value="i want count days here " />
How can I do this?
This is the complete code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-datepicker {font-size:11px;}
</style>
<script>
$(function() {
$( "#from" ).datepicker({
onSelect: calculate
});
});
$(function() {
$( "#to" ).datepicker({
onSelect: calculate
});
});
</script>
</head>
<body>
<form class="formwhite">
<table>
<tr><td>From:</td><td><input type="text" id="from" onKeyUp="calculate();" /> </td></tr>
<tr><td>To:</td><td><input type="text" id="to" onKeyUp="calculate();" /></td></tr>
</table>
</form>
<span id="result"></span>
<script>
var calculate = function() {
var from = document.getElementById("from").value;
var fromdate = from.slice(3, 5);
fromdate = parseInt(fromdate);
var frommonth = from.slice(0, 2);
frommonth = parseInt(frommonth);
var fromyear = from.slice(6, 10);
fromyear = parseInt(fromyear);
var to = document.getElementById("to").value;
var todate = to.slice(3, 5);
todate = parseInt(todate);
var tomonth = to.slice(0, 2);
tomonth = parseInt(tomonth);
var toyear = to.slice(6, 10);
toyear = parseInt(toyear);
var oneDay = 24*60*60*1000;
var firstDate = new Date(fromyear,frommonth,fromdate);
var secondDate = new Date(toyear,tomonth,todate);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if (diffDays)
document.getElementById("result").innerHTML=diffDays;
}
</script>
</body>
</html>
So you're asking the question: "How do I get a value from one field and set it in another?" You want http://api.jquery.com/val/ :
$("#name").val($("#result").val());
$("#result").val() gets whatever value the element with id result has.
$("#name").val(value) sets the value of the element with id name
Or, simply add (or replace) the line
document.getElementById("name").value = diffDays;
in the same if block as where you have
document.getElementById("result").innerHTML = diffDays;
Here's your entire <script> block, with my one line added:
<script>
var calculate = function() {
var from = document.getElementById("from").value;
var fromdate = from.slice(3, 5);
fromdate = parseInt(fromdate);
var frommonth = from.slice(0, 2);
frommonth = parseInt(frommonth);
var fromyear = from.slice(6, 10);
fromyear = parseInt(fromyear);
var to = document.getElementById("to").value;
var todate = to.slice(3, 5);
todate = parseInt(todate);
var tomonth = to.slice(0, 2);
tomonth = parseInt(tomonth);
var toyear = to.slice(6, 10);
toyear = parseInt(toyear);
var oneDay = 24*60*60*1000;
var firstDate = new Date(fromyear,frommonth,fromdate);
var secondDate = new Date(toyear,tomonth,todate);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if (diffDays) /* THE NEW STUFF IS RIGHT HERE*/ {
document.getElementById("result").innerHTML=diffDays;
document.getElementById("name").value=diffDays;
} // THE NEW STUFF ENDS HERE
}
</script>