Need the output of the time script to change the input of a input field but can't figure it out.
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function checkouttimeFunction() {
var d = new Date();
var x = document.getElementById("demo");
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
x.innerHTML = h + ":" + m + ":" + s;
var elem = document.getElementById("cout");
elem.value = document.getElementById("demo");
}
</script>
Looks like on the last line in checkouttimeFunction() you want do to:
elem.value = x.innerHTML;
Other than:
elem.value = document.getElementById("demo");
As you are trying to set the value to be a DOM element.
Fiddle Example
I'm assuming you want the innerHTML text of x to be displayed in the input field elem.
You cant set the 'value' attribute to an HTML element, but you can instead just set it to the desired text (e.g the time).
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function checkouttimeFunction() {
var d = new Date();
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
var elem = document.getElementById("cout");
elem.value = h + ":" + m + ":" + s;
}
</script>
You should change
elem.value = document.getElementById("demo");
to
elem.value = document.getElementById("demo").innerHTML;
That should give you what you need. Because you need the content of the element and document.getElementById() will just give you the element, Which will be in the form of an Object.
Hope this helps.
Related
I am trying to use this stopwatch here: Stopwatch Script but for many counters on the page, that are dynamically created via php loops.
For example:
<button type="button" class="btn" id="bn1" data-bid="n1">Start</button>
<br><br>
<div id=n1></div>
<br><br>
<button type="button" class="btn" id="bn2" data-bid="n2">Start</button>
<br><br>
<div id=n2></div>
Using jquery i am trying to create 2 simple functions. One to start each timer clicked and one to stop it
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script language=javascript>
var vars = {};
var bid;
var h = 0;
var m = 0;
var s = 0;
$('[class^=btn]').on('click', function() {
var pause = $(this).text() === 'Stop';
$(this).text(pause ? 'Start' : 'Stop');
bid = $(this).attr('data-bid');
return (this.timvar ^= 1) ? startimer(bid) : stop(bid);
});
function stop(bid) {
clearTimeout(['tm' + bid]);
}
function startimer(bid) {
//vars['tm' + bid] = setInterval('disp('+bid+')',1000);
vars['tm' + bid] = setInterval(function() {
disp(bid)
}, 1000);
}
function disp(bid) {
//alert(bid);
// Format the output by adding 0 if it is single digit //
if (s < 10) {
var s1 = '0' + s;
} else {
var s1 = s;
}
if (m < 10) {
var m1 = '0' + m;
} else {
var m1 = m;
}
if (h < 10) {
var h1 = '0' + h;
} else {
var h1 = h;
}
// Display the output //
str = h1 + ':' + m1 + ':' + s1;
document.getElementById(bid).innerHTML = str;
// Calculate the stop watch //
if (s < 59) {
s = s + 1;
} else {
s = 0;
m = m + 1;
if (m == 60) {
m = 0;
h = h + 1;
} // end if m ==60
} // end if else s < 59
// end of calculation for next display
}
</script>
Somehow i have to be able to execute these 2 functions multiple times for each button, that will use a dynamic 'tm' variable that updates the text inside the n1 and n2..(etc) divs with the timer. And then when the user presses stop to be able to stop that specific tm var.
But...i am kinda lost when it comes to dynamic variables and how to properly pass them around between javascript functions...I am not even sure if there is a simpler way of doing this...I dont know what's the proper term to search for it in google. Any advice ? What am i doing wrong ?
-Thanks
I have this:
<div id="testcase">abcdefghijklmnopqrstuvwxyz</div>
I would like to add this: <span> with an offset.
So when I for example would have the JS function: addSpan(4) this would happen:<div id="testcase">abcd<span>efghijklmnopqrstuvwxyz</div>
To visualise what I'm looking for:
function addSpan(i){
$('#testcase').append('<span>', i);
}
Use slice and concatinate...
function addSpan(i){
var content = $("#testcase").html();
var before = content.slice(0, i);
var after = content.slice(i + 1);
$("#testcase").html(before + "<span></span>" + after);
}
Here another wut i tired LIVE DEMO
$("#btn_clck").on('click', function () {
var gText = $("#testcase").html();
var getlength = gText.length;
var finalValue = "";
for (var i = 0; i < getlength; i++) {
var setData = gText.charAt(i);
if (i == 4) {
finalValue += '<span></span>'
}
finalValue += setData;
}
$("#testcase").text(finalValue);
});
but i think Steini's answers was better
i have a js code for a sub total and this sub total change when im changing value for its textfields, however as this fields for TotalSavings and TotalVariable changes its supposed to change the value for my TotalExpenses as well but its not doing it. the textfields for my TotalSavings, TotalVariable and TotalExpenses are read-only, how can i make my TotalExpenses change as per value from my sub totals: TotalSavings and TotalVariable
here are my js code for sub total,
$(function() {
$("#Insurance, #COL, #Saveup, #SSS").keyup(function() {
var i = parseInt($("#Insurance").val(), 10);
var c = parseInt($("#COL").val(), 10);
var s = parseInt($("#Saveup").val(), 10);
var e = parseInt($("#SSS").val(), 10);
$("#TotalSavings").val(i + c + s + e);
});
});
$(function() {
$("#Fares, #Recreation, #OtherExpenses").keyup(function() {
var f = parseFloat($("#Fares").val(), 10);
var r = parseFloat($("#Recreation").val(), 10);
var o = parseFloat($("#OtherExpenses").val(), 10);
$("#TotalVariable").val(f + r + o);
});
});
and here is my grand total js code,
$(function() {
$("#TotalSavings, #TotalVariable").keyup(function() {
var t1 = parseFloat($("#TotalSavings").val(), 10);
var t2 = parseFloat($("#TotalVariable").val(), 10);
$("#TotalExpenses").val(t1 + t2);
});
});
Do not use keyUp handler for total value counting, use function for this.
In your case keyUp callback function for TotalSavings and TotalVariable is never called because the changes are made programmatically by script, not by user input.
$(function() {
$("#Insurance, #COL, #Saveup, #SSS").keyup(function() {
var i = parseInt($("#Insurance").val(), 10);
var c = parseInt($("#COL").val(), 10);
var s = parseInt($("#Saveup").val(), 10);
var e = parseInt($("#SSS").val(), 10);
$("#TotalSavings").val(i + c + s + e);
updateTotalExpenses();
});
$("#Fares, #Recreation, #OtherExpenses").keyup(function() {
var f = parseFloat($("#Fares").val(), 10);
var r = parseFloat($("#Recreation").val(), 10);
var o = parseFloat($("#OtherExpenses").val(), 10);
$("#TotalVariable").val(f + r + o);
updateTotalExpenses();
});
});
function updateTotalExpenses() {
var t1 = parseFloat($("#TotalSavings").val(), 10);
var t2 = parseFloat($("#TotalVariable").val(), 10);
$("#TotalExpenses").val(t1 + t2);
});
I'd like to directly set the listbox elements defined in a jsf block via setting them in a javascript code, but the document.getElementById() returns null ?
JSF Code:
<h:panelGroup id="dtEffectiveDate">
<h:outputText value="EffectiveDates:" style="margin-left: 250px;width:76px;"/>
<h:selectManyListbox id="effectiveDateListbox" style="margin-left: 15px; width:76px;" size="2">
<c:selectItems id="effectiveDateSelectItems" value="#{manualDataEntryRegText.effectiveDates}"/>
</h:selectManyListbox>
</h:panelGroup>
JavaScript code:
CalendarPopup.handleSelectForMultipleDates = function(type, args, obj, inputEl)
{
alert("MultiSelect");
var arrDates = CalendarPopup.effectiveDateCalendar.getSelectedDates();
var length = arrDates.length;
var i=0;
var tokenizedDates = "";
var txtDate = document.getElementById("pageForm:effectiveDateListbox");
alert(txtDate); // returns null
for (i = 0; i!= length; i++)
{
var date = arrDates[i];
var displayMonth = date.getMonth() + 1;
var displayYear = date.getFullYear();
var displayDate = date.getDate();
tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
effectiveDateListbox.options[i].value = tokenizedDates;
i++;
}
}
EDIT: I am able to get the listbox but cannot set it:
How do I set the listbox ?
var listBox = document.getElementById('pageForm:effectiveDateListbox');
for (i = 0; i!= length; i++)
{
var date = arrDates[i];
var displayMonth = date.getMonth() + 1;
var displayYear = date.getFullYear();
var displayDate = date.getDate();
tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
listBox.options[i].value = tokenizedDates;
i++;
}
This should not return null:
<select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>
document.getElementById('pageForm:effectiveDateListbox');
If it is, it might be that the select element does not exist at the time your javascript is running. To protect against that you could try:
window.onload = function(){
// do stuff here
};
I am adding a row to a table, and attached an ondblclick event to the cells. The function addrow is working fine, and the dblclick is taking me to seltogg, with the correct parameters. However, the var selbutton = document.getElementById in seltogg is returning a null. When I call seltogg with a dblclick on the original table in the document, it runs fine. All the parameters "selna" have alphabetic values, with no spaces, special characters, etc. Can someone tell me why seltogg is unable to correctly perform the document.getElementById when I pass the id from addrow; also how to fix the problem.
function addrow(jtop, sel4list, ron4list) {
var tablex = document.getElementById('thetable');
var initcount = document.getElementById('numrows').value;
var sel4arr = sel4list.split(",");
var idcount = parseInt(initcount) + 1;
var rowx = tablex.insertRow(1);
var jtop1 = jtop - 1;
for (j = 0; j <= jtop1; j++) {
var cellx = rowx.insertCell(j);
cellx.style.border = "1px solid blue";
var inputx = document.createElement("input");
inputx.type = "text";
inputx.ondblclick = (function() {
var curj = j;
var selna = sel4arr[curj + 2];
var cellj = parseInt(curj) + 3;
inputx.id = "cell_" + idcount + "_" + cellj;
var b = "cell_" + idcount + "_" + cellj;
return function() {
seltogg(selna, b);
}
})();
cellx.appendChild(inputx);
} //end j loop
var rowCount = tablex.rows.length;
document.getElementById('numrows').value = rowCount - 1; //dont count header
} //end function addrow
function seltogg(selna, cellid) {
if (selna == "none") {
return;
}
document.getElementById('x').value = cellid; //setting up for the next function
var selbutton = document.getElementById(selna); //*****this is returning null
if (selbutton.style.display != 'none') { //if it's on
selbutton.style.display = 'none';
} //turn it off
else { //if it's off
selbutton.style.display = '';
} //turn it on
} //end of function seltogg
You try, writing this sentence:
document.getElementById("numrows").value on document.getElementById('numrows').value
This is my part the my code:
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
Look you have to use this " y not '.
TRY!!!!