Develop Reference

Cant call Jquery function in if loop

my first ever question pretty sure I'm being a bit daft here, but am a beginner and would appreciate your help.
Im working on a webpage where there is a html table listing several columns of data.
When the page loads it runs a jquery script which counts the different types of "incidents" and plots them in another table which then another jquery script populates a graph.
I have a third script (javascript) which after a button is clicked, runs an if loop, which looks at the data in the first column and if it does not match the criteria then the row is deleted.
So far so good, the issue is that I want the script which populates the table for the graph to run again, but Im not sure how to call it from my if loop.
Ive put the two scripts below, basically I want to call the 1st script in the second script.
$(function () {
var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')");
$("#result").html(NumFireAlarms.length + " Fire Alarm");
var firealarms = NumFireAlarms.length;
document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = firealarms
var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')");
$("#result").html(NumLockout.length + " Lockout Out of Office Hours");
var lockouts = NumLockout.length;
document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = lockouts
var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')");
$("#result").html(NumLockout.length + " Lockout Day Time");
var lockoutsDayTime = NumLockoutDayTime.length;
document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = lockoutsDayTime
var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')");
$("#result").html(NumSensitiveIncident.length + " Sensitive Incident");
var SensitiveIncident = NumSensitiveIncident.length;
document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = SensitiveIncident
});
function filterForGraph() {
var incident_category = document.getElementById("Incident_Category").value;
var start_date = document.getElementById("start_date").value;
var end_date = document.getElementById("end_date").value;
var staff_type = document.getElementById("Job_Title").value;
var i;
var count = 0;
var table_length = document.getElementById("incidents").rows;
var TL = table_length.length;
for (i = TL - 1; i >= 1; i--)
{
var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;
var date_column = document.getElementById("incidents").rows[i].cells.item(1).innerHTML;
var staff_colunm = document.getElementById("incidents").rows[i].cells.item(8).innerHTML;
if (category_column === incident_category)
{
alert("yay")
count++
}
else if (category_column !== incident_category)
{
alert("boo")
document.getElementById("incidents").deleteRow(i);
//CALL FIRST SCRIPT HERE??
}
}
}

I removed a few bits of code that did not seem to do anything, but I'm sure you can put them back. I think you might want something like this:
function updateTable(){
var elResult = document.getElementById("result");
var elNumIncidentType = document.getElementById("no_of_incident_type");
var firealarms: document.querySelectorAll("#incidents tr:contains('Fire Alarm')").length;
var lockouts: document.querySelectorAll("#incidents tr:contains('Lockout Out of Office Hours')").length;
var lockoutsDayTime: document.querySelectorAll("#incidents tr:contains('Lockout Day Time')").length;
var sensitiveIncident: document.querySelectorAll("#incidents tr:contains('Sensitive Incident')").length;
elResult.innerHTML = "";
elResult.innerHTML += "<div>" + firealarms + " Fire Alarm</div>";
elResult.innerHTML += "<div>" + lockouts + " Lockout Out of Office Hours</div>";
elResult.innerHTML += "<div>" + lockoutsDayTime + " Lockout Day Time</div>";
elResult.innerHTML += "<div>" + sensitiveIncident + " Sensitive Incident</div>";
elNumIncidentType.rows[1].cells[1].innerHTML = firealarms;
elNumIncidentType.rows[2].cells[1].innerHTML = lockouts;
elNumIncidentType.rows[3].cells[1].innerHTML = lockoutsDayTime;
elNumIncidentType.rows[4].cells[1].innerHTML = sensitiveIncident;
}
function filterForGraph() {
var elIncidents = document.getElementById("incidents");
var incident_category = document.getElementById("Incident_Category").value;
var table_length = document.getElementById("incidents").rows.length;
for (var i = table_length - 1; i >= 1; i--) {
var currentIncident = elIncidents.rows[i].cells;
var category_column = currentIncident.item(0).innerHTML;
if (category_column != incident_category) { elIncidents.deleteRow(i); }
}
updateTable();
}
$(function(){ updateTable(); });

Hi JonSG tried your code and it didnt work not sure why, but it gave me some ideas to work with and I think Ive cracked it
function Populate_Incident_No_Table() {
//previously function called updateTable
$(function () {
var NumFireAlarms = $("#incidents tr:contains('Fire Alarm')").length;
document.getElementById("no_of_incident_type").rows[1].cells[1].innerHTML = NumFireAlarms
var NumLockout = $("#incidents tr:contains('Lockout Out of Office Hours')").length;
document.getElementById("no_of_incident_type").rows[2].cells[1].innerHTML = NumLockout
var NumLockoutDayTime = $("#incidents tr:contains('Lockout Day Time')").length;
document.getElementById("no_of_incident_type").rows[3].cells[1].innerHTML = NumLockoutDayTime
var NumSensitiveIncident = $("#incidents tr:contains('Sensitive Incident')").length;
document.getElementById("no_of_incident_type").rows[4].cells[1].innerHTML = NumSensitiveIncident
});
}
function filterForGraph() {
var incident_category = document.getElementById("Incident_Category").value;
var i;
var TL = document.getElementById("incidents").rows.length;
for (i = TL - 1; i >= 1; i--)
{
var category_column = document.getElementById("incidents").rows[i].cells.item(0).innerHTML;
if (category_column !== incident_category)
{
document.getElementById("incidents").deleteRow(i);
}
}
Populate_Incident_No_Table();
drawGraph();
}
I think the issue was how I was trying to call the functions. So what I've done to achieve what I wanted (please excuse any bad terminology / phrasing).
First I tried to name the function $(function updateTable(){ this did not work when I then tried to call the function like this updateTable();
Second thing I tried was putting the updateTable() function "inside" a function and call that function. This has worked for me I dont know why.
Thanks for your help without it I would not have thought to try what I did

Javascript- Dynamic variable loop

I'm trying to reduce the amount of code I repeat.
Currently I have the below:
var item1H = $(".item-1").height();
var item1W = $(".item-1").height();
$(".item-1 .text").css('margin-left', -item1W/2);
$(".item-1 .text").css('margin-bottom', -item1H/2);
var item2H = $(".item-2").height();
var item2W = $(".item-2").height();
$(".item-2 .text").css('margin-left', -item2W/2);
$(".item-2 .text").css('margin-bottom', -item2H/2);
I'm looking to put this into a for loop where the variable number would count up to whatever number I needed it to stop.

You can make function like this and use whenever you want
toSetMargin(".item-2")
toSetMargin(".item-2")
function toSetMargin(objStr){
var widthTmp = $(objStr + ' .text').height();
var heightTmp = $(objStr + ' .text').height();
obj.css('margin-left', -widthTmp/2);
obj.css('margin-bottom', -heightTmp/2)
}
This code not impact any other code.

You could use $('[class^="item-"]') to get all the elements that have a class that starts with item-, and the loop over them
$('[class^="item-"]').each(function(){
var $elem = $(this);
var item1H = $elem.height();
var item1W = $elem.width();
$elem.find('.text').css({'margin-left': -item1W/2,'margin-bottom':-item1H/2});
});

Ooh boy, one of these problems. This should help (untested):
for(i=1;i<=STOPPING_NUMBER;i++){
window["item"+i+"H"] = $(".item-"+i).height();
window["item"+i+"W"] = $(".item-"+i).width(); //Was height, accident?
$(".item-"+i+" .text").css('margin-left', 0-window["item"+i+"W"]/2); //Hope this works lol
$(".item-"+i+" .text").css('margin-bottom', 0-window["item"+i+"H"]/2);
}

Guessing these lines:
var item1W = $(".item-1").height();
var item2W = $(".item-2").height();
Should have been:
var item1W = $(".item-1").width();
var item2W = $(".item-2").width();
You could do something like:
function setCSS(item,attr,val) {
$(item +" .text").css(attr, (val * -1)/2);
}
var i, max = 10;
for(i=1;i<=max;i++) {
setCSS(".item-"+ i,"margin-left",$(".item-"+ i).width());
setCSS(".item-"+ i,"margin-bottom",$(".item-"+ i).height());
}
Or something less flexible within the function:
function setCSS(item,w,h) {
$(item +" .text").css("margin-left", (w * -1)/2);
$(item +" .text").css("margin-bottom", (h * -1)/2);
}
var i, max = 10;
for(i=1;i<=max;i++) {
setCSS(".item-"+ i,$(".item-"+ i).width()),$(".item-"+ i).height());
}

Something like this should be pretty acceptible in your case, I guess:
for (var i = 1, len = someN; i < len; i++) {
var $item = $('.item-' + i);
$item.find('.text').css({
'margin-left': -$item.width() / 2,
'margin-bottom': -$item.height() / 2
});
}

Run javascript on multiple selected checkboxes

Hello I am currently writing a web application that calculates a number based on what a user has checked.
You can see it here.
If you go to the link you can see that a person will check a checkbox first and enter a value from the dropdown and type 2 values to get an output.
What I need help with is being able to calculate the value for more than one checkbox at a time.
Right now I can only calculate the value for a checkbox one at a time even if multiple are selected. So basically I need help try to figure how to calculate for more than one checkbox at a time.
I was using an if statement inside my javascript file but thats not giving me the result that I want.

Just remove else if statements, change for IF only. But I have to say that's solution its not that scalable, and for a big application could turns into a nightmare.
I recommend you try to use $("input:checked").each(function() {}); if you dont want to store it and just show the values on the client to avoid further problems and bad code. With your line of thought, you'll need everytime make copy and paste those IF's everytime you want to implement new form labels.
$(document).ready(function(){
function check(){
if($('#checkbox1').is(':checked')){
var pokemonCount = parseInt($("#pokecount1").val());
var candyCount = parseInt($("#candycount1").val());
var reqCandy = parseInt($("#dropdown1 :selected").val());
var evolveAmount = 0;
evolveAmount = Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
$("#p1").html(evolveAmount);
}
if($('#checkbox2').is(':checked')){
var pokemonCount2 = parseInt($("#pokecount2").val());
var candyCount2 = parseInt($("#candycount2").val());
var reqCandy2 = parseInt($("#dropdown2 :selected").val());
var evolveAmount2 = 0;
evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
$("#p2").html(evolveAmount2);
}
if ($('#checkbox3').is(':checked')){
var pokemonCount3 = parseInt($("#pokecount3").val());
var candyCount3 = parseInt($("#candycount3").val());
var reqCandy3 = parseInt($("#dropdown3 :selected").val());
var evolveAmount3 = 0;
evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
$("#p3").html(evolveAmount3);
}
}
$("#compute").click(function(){
check()
});
});

Just remove Else if to if only
$(document).ready(function(){
function check(){
if($('#checkbox1').is(':checked')){
var pokemonCount = parseInt($("#pokecount1").val());
var candyCount = parseInt($("#candycount1").val());
var reqCandy = parseInt($("#dropdown1 :selected").val());
var evolveAmount = 0;
evolveAmount = Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
$("#p1").html(evolveAmount);
}
if($('#checkbox2').is(':checked')){
var pokemonCount2 = parseInt($("#pokecount2").val());
var candyCount2 = parseInt($("#candycount2").val());
var reqCandy2 = parseInt($("#dropdown2 :selected").val());
var evolveAmount2 = 0;
evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
$("#p2").html(evolveAmount2);
}
if ($('#checkbox3').is(':checked')){
var pokemonCount3 = parseInt($("#pokecount3").val());
var candyCount3 = parseInt($("#candycount3").val());
var reqCandy3 = parseInt($("#dropdown3 :selected").val());
var evolveAmount3 = 0;
evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
$("#p3").html(evolveAmount3);
}
}
$("#compute").click(function(){
check()
});
});

You've used elseif, so if the first checkbox is checked then it runs that code and stops. You need a series of if blocks:
if(1.isChecked){
}
if(2.isChecked){
}

You are using else if statements in your code, which means that the code of only one of the 3 if statements can be executed. More info here.
You need to replace them with simple if statements, like this:
$(document).ready(function(){
function check(){
if($('#checkbox1').is(':checked')){
var pokemonCount = parseInt($("#pokecount1").val());
var candyCount = parseInt($("#candycount1").val());
var reqCandy = parseInt($("#dropdown1 :selected").val());
var evolveAmount = 0;
evolveAmount = Math.floor(((candyCount + pokemonCount) - 1) / (reqCandy));
$("#p1").html(evolveAmount);
}
if($('#checkbox2').is(':checked')){
var pokemonCount2 = parseInt($("#pokecount2").val());
var candyCount2 = parseInt($("#candycount2").val());
var reqCandy2 = parseInt($("#dropdown2 :selected").val());
var evolveAmount2 = 0;
evolveAmount2 = Math.floor(((candyCount2 + pokemonCount2) - 1) / (reqCandy2));
$("#p2").html(evolveAmount2);
}
if ($('#checkbox3').is(':checked')){
var pokemonCount3 = parseInt($("#pokecount3").val());
var candyCount3 = parseInt($("#candycount3").val());
var reqCandy3 = parseInt($("#dropdown3 :selected").val());
var evolveAmount3 = 0;
evolveAmount3 = Math.floor(((candyCount3 + pokemonCount3) - 1) / (reqCandy3));
$("#p3").html(evolveAmount3);
}
}
$("#compute").click(function(){
check()
});
});

Code is working fine in firefox but not working in chrome. Why?

In my web application I've the following code in a function. And when I execute the code in firefox it works fine and gives me the output. But when I execute the same code in chrome the function is entering infinite loop and returning (its not throwing any exception or error).
And the Info: elem is an xml element not html element; and that xml is a SVG image
The Code is like this:
Function call:
buildElemView(viewElement, container, 1, viewType);
and then the function:
function buildElemView(elem, container, start, viewType){
var vwType = viewType;
var cat = $(elem).find('cat:first').text();
//alert("cat is "+cat);
var type = $(elem).find('type:first').text();
var id = $(elem).find('eid:first').text();
var mid = $(elem).find('mid:first').text();
var parentMids = $(elem).parents().map(function () {
return $(this).find('mid:first').text();
})
.get().reverse().join("");
if (viewType==1 && Number(eleCat>60) && Number(cat)<40)
return;
var parentElementId = parentMids;
var elementGroupId = parentMids+mid;
var grp = $(elem).find('gr:first').text();
var cz = $(elem).find('cz:first').text();
var zo = $(elem).find('zo:first').text();
var yo = $(elem).find('yo:first').text();
var rotate = ($(elem).find('rt:first').text().split(';'))[0];
var scale = ($(elem).find('sc:first').text().split(';'))[0];
var positionx = ($(elem).find('px:first').text().split(';'))[0];
var positiony = ($(elem).find('py:first').text().split(';'))[0];
var positionz = ($(elem).find('pz:first').text().split(';'))[0];
var dimension = $(elem).find('dm:first').text();
var parentdimension = $(elem).parent().find('dm:first').text();
var parentheight=0;
if (parentdimension !='')
parentheight = (parentdimension.split(';'))[2];
if (parentheight==undefined || parentheight=="null")
parentheight =0;
var height = 0;
if (dimension !='')
height = (dimension.split(';'))[2];
if (height==undefined || height=="null")
height =0;
var transformStr = "";
var num =0;
if (start && start==1)
{
transformStr= "translate(0,0) rotate(0) scale(1,1)";
if (viewType==1 && Number(eleCat)<100) {
var px = 0;
var py = 0;
if (scaleX==-1) px = 15000;
if (scaleY==-1) py = 15000;
transformStr = "translate("+ px+","+py +") rotate(0) scale("+ scaleX+","+scaleY+ ")";
}
if (Number(type)==50 || Number(type)==80 || Number(type)==100)
vwType=4;
}
else {
if (viewType<3 || Number(cat)>40)
{
if (viewType==2) {
var px = positionx;
var py = positiony;
var pz = positionz;
if (parentheight)
positiony = Number(parentheight)-Number(positionz)-Number(height);
}
//And there is a lot of Code here but its not even executing the entire code //strightly coming to alert box after clicking debug stepover.
}
The Function is too big I can give you this much only...
But by debugging the problem happens here...
var cat = $(elem).find('cat:first').text();
var type = $(elem).find('type:first').text();
var id = $(elem).find('eid:first').text();
var mid = $(elem).find('mid:first').text();
I came to a conclusion after putting an alert message in between them like this.
var cat = $(elem).find('cat:first').text();
var type = $(elem).find('type:first').text();
alert("Alert");
var id = $(elem).find('eid:first').text();
var mid = $(elem).find('mid:first').text();
In firefox alert is shown once and all the lines are executed and returned. But in chrome alert is keep on coming. It's not executing first two lines and last two lines just executing alert and that too continuously doing it.
Info: This worked fine with chrome version 47 but now not working in version 49 after updation.
Please do help why this weird behavior of Chrome.

I had a related issue a monte ago, and i solved it writing the definition of the function after the call

assign parameter value of an object javascript

I have been looking at this code for a long time trying to figure this out, but I am having no luck. This issue is that I want to assign a value to the parameter boxId. When I click on a box in the webpage an alert will come up displaying that id. I have tried many things, but nothing seems to work. I'm a beginner, so I feel at this point there just must be something that I don't know how to do.
constructor function:
function Box (boxId, name, color, number, coordinates) {
this.boxId = boxId;
this.name = name;
this.color = color;
this.number = number;
this.coordinates = coordinates;
}
global variables:
var boxes = [];
var counter = 0;
var boxId = 0;
init function:
window.onload = init;
function init() {
var generateButton = document.getElementById("generateButton");
generateButton.onclick = getBoxValues;
var clearButton = document.getElementById("clearButton");
clearButton.onclick = clear;
}
function to get values and create new boxes:
function getBoxValues() {
var nameInput = document.getElementById("name");
var name = nameInput.value;
var numbersArray = dataForm.elements.amount;
for (var i = 0; i < numbersArray.length; i++) {
if (numbersArray[i].checked) {
number = numbersArray[i].value;
}
}
var colorSelect = document.getElementById("color");
var colorOption = colorSelect.options[colorSelect.selectedIndex];
var color = colorOption.value;
if (name == null || name == "") {
alert("Please enter a name for your box");
return;
}
else {
var newbox = new Box(boxId, name, color, number, "coordinates");
boxes.push(newbox);
counter++;
var boxId = counter;
}
addBox(newbox);
var data = document.getElementById("dataForm");
data.reset();
}
function that adds boxes to the page:
function addBox(newbox) {
for (var i = 0; i < newbox.number; i++) {
var scene = document.getElementById("scene");
var div = document.createElement("div");
div.className += " " + "box";
div.innerHTML += newbox.name;
div.style.backgroundColor = newbox.color;
var x = Math.floor(Math.random() * (scene.offsetWidth-101));
var y = Math.floor(Math.random() * (scene.offsetHeight-101));
div.style.left = x + "px";
div.style.top = y + "px";
scene.appendChild(div);
div.onclick = display;
}
}
function to display alert when box is clicked:
function display(e) {
var a = e.target;
alert(a.counter);
}
function to clear boxes:
function clear() {
var elems = document.getElementsByClassName("box");
for ( k = elems.length - 1; k >= 0; k--) {
var parent = elems[k].parentNode;
parent.removeChild(elems[k]);
}
}
All of the other functions work just fine. I keep running into the id showing up as "undefined" when I click it, or the counter displaying "0" in the console log, for everything I've tried.

You can do it like this.
First, in addBox() embed boxId as an tag's attribute like this:
div.setAttribute('data-boxId', newbox.boxId);
Then in display() you can retrieve it back:
alert(e.target.getAttribute('data-boxId'));
Please tell if you do not prefer this approach and I will post an alternative (closure things).
Edit: Add jsfiddle example http://jsfiddle.net/runtarm/8FJpU/

One more try. Perhaps if you change:
var boxId = counter;
to
boxId = counter;
It will then use the boxId from the outer scope instead of the one defined in the function getBoxValues()