We Keep Coding

innerHtml and for loop

i want to write a short code i have multi contenteditable divs and i use a function to put the value of the div to a textarea please check with me
var myContentArr = ["myContent1", "myContent2", "myContent3", "myContent4", "myContent5", "myContent6"];
var hiddenArr = ["hidden1", "hidden2", "hidden3", "hidden4", "hidden5", "hidden6"];
function myFunction(){
for (var i = 0; i < hiddenArr.length; i++) {
document.getElementById(hiddenArr[i]).value =
for (var i = 0; i < myContentArr.length; i++) {
document.getElementById(myContentArr[i]).innerHTML
}
}
return true;
}

JavaScript - Checkbox onchange function is not executing the whole way through

I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>

Number of checked checkboxes

How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}

You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.

iterating through texbox values using for loop in javascript

I have a little procedure to prevent server side action if all texboxes do not have values.
I want to assign a color to the texbox for in case a value was not added.
This is not working the way I expected.
var txtName = document.getElementById("MainContent_txtName").value;
var txtSurname = document.getElementById("MainContent_txtSurname").value;
var txtContact = document.getElementById("MainContent_txtContactNumber").value;
var txtEmail = document.getElementById("MainContent_txtEmail").value;
var txtMessage = document.getElementById("MainContent_txtMessage").value;
var fields = new Array(txtName, txtSurname, txtContact, txtEmail, txtMessage);
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i] == "") {
fields[i].style.backgroundcolor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundcolor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
regards

The problem is you are creating an array of values, you need the elements themselves:
var txtName = document.getElementById("MainContent_txtName");
var txtSurname = document.getElementById("MainContent_txtSurname");
var txtContact = document.getElementById("MainContent_txtContactNumber");
var txtEmail = document.getElementById("MainContent_txtEmail");
var txtMessage = document.getElementById("MainContent_txtMessage");
var fields = [txtName, txtSurname, txtContact, txtEmail, txtMessage];
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i].value == "") {
fields[i].style.backgroundColor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundColor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
You have to change backgroundcolor to backgroundColor and add .value to your if check.

try style.backgroundColor instead of style.backgroundcolor (note the capital "C") Javascript is case sensitive.

How to retain a selected value in dynamically generated dropdown box to the next jsp page?

I have a drop down box where the options are coming from the configured properties file.The options are generated on load of the page.I have used the following code.
In JSP
<select name="IDNo" id="IDNo">
</select>
function loading()
{
var d = document.getElementById("system");
var df=document.getElementById("IDNo");
var i = 0;
var disp = document.getElementById("Range");
var numberOfOptions = df.options.length;
for (i = 0; i < numberOfOptions; i++) {
df.remove(0);
}
if (d.value == "Apple") {
df.options[df.options.length] = new Option("ALL","");
for(i=1;i<=disp.value;i++)
{
var option = document.createElement("option");
option.text=i;
option.value=i;
df.add(option, df.options[null]);
}
}

Add something like the following at the end of the code:
<c:if test="${!empty param.IDNo}">
for (var i = 0; i < df.options.length; i++) {
if (df.options[i].value == '${param.IDNo}') {
df.selectedIndex = i;
break;
}
}
</c:if>

Use the simple java script function to set selected value of combo or drop down box in the other page
function setSelected()
{
var Num = "<%=NumID%>";
if(Num != null && Num !='' )
{
var secondCombo = document.getElementById("combo_id");
secondCombo.value = Num;
}
}