We Keep Coding

JavaScript click works in console but not inside Selenium execute_script

I am using Selenium to test a site, the idea is to get all rows from a table, select the visible buttons then click them. Once clicked an event is triggered and with AJAX data is loaded right under the rows.
The following code works perfectly inside the Firefox console. Actually clicks so fast that items are all loaded at once (there are max 10 rows so I would not bother to add a wait event).
function button_visible(row) {
var opacity = row.style.opacity;
if (opacity == "" || opacity == 1) {
return true;
} else {
return false;
}
}
var table = document.querySelectorAll('div>.table');
for (x = 1; x < table.length; x++) {
row = table.item(x);
var row_buttons = row.querySelectorAll('icon-button');
for (var i = 0; i < row_buttons.length; i++) {
if (button_visible(row_buttons.item(i))) {
row_buttons.item(i).click();
}
}
}
Running this JavaScript from Selenium doesn't not work:
js='function button_visible(row) {var opacity = row.style.opacity; if (opacity === "" || opacity == 1) {return true;} else {return false;}} var table = document.querySelectorAll('div>.table'); for (x = 1; x < table.length; x++) {var row = table.item(x); var row_buttons = row.querySelectorAll('icon-button'); for (var i = 0; i < row_buttons.length; i++) {if(button_visible(row_buttons.item(i))){ row_buttons.item(i).click();}}}'
driver.execute_script(js)
Added come console.log's, they show up in the console but the click event is not triggered at all. Funny enough, after trying to run the code with Selenium, running the JavaScript from console does not work as well.
I also tried to return these rows as an array and click with Selenium but this just makes things complicated as I get stale element exception. To make sure it works I need to re-fetch the table rows after each click etc.
I cannot even think a reason why this would not work. Any opinions?

Try the following:
driver.execute_script("""
function button_visible(row) {
var opacity = row.style.opacity;
if (opacity == "" || opacity == 1) {
return true;
} else {
return false;
}
}
var table = document.querySelectorAll('div>.table');
for (x = 1; x < table.length; x++) {
row = table.item(x);
var row_buttons = row.querySelectorAll('icon-button');
for (var i = 0; i < row_buttons.length; i++) {
if (button_visible(row_buttons.item(i))) {
row_buttons.item(i).click();
}
}
}
""")
PS: For running multiline JS in Selenium (Python) should be used """ (start and end).
Hope it helps you!

Check if inputs are empty or have text instead of numbers

as you can see here https://jsfiddle.net/kztnmm9o/ I am trying to check if the inputs are empty. If they are empty I want to display the div id="fehler", if every input has a value (must be a number, if not it shall display id="fehler" as well) I want to do the function. I am pretty new to javascript, might be a obvious mistake.
Thank you for your help!
This is the orignal javascript code without checking the inputs, which works:
var selectors = document.querySelectorAll("#eing1, #eing2, #eing3");
for (var i = 0; i < selectors.length; i++) {
selectors[i].addEventListener('keyup', function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("button").click();
}
});
}
function ausgeben(){
var kostentisch = parseInt(document.getElementById("eing1").value)
var bruttogehalt = parseInt(document.getElementById("eing2").value)
var arbeitstage = parseInt(document.getElementById("eing3").value)
var stundenlohn = bruttogehalt/arbeitstage/8;
var arbeitszeit = arbeitstage*8;
var produktivitaetssteigerung = arbeitszeit*0.12;
var produktivitaetssteigerung2 = arbeitstage/produktivitaetssteigerung;
var gewinnprotag = produktivitaetssteigerung2*stundenlohn;
var amortisationszeit = Math.round(kostentisch/ gewinnprotag);
document.getElementById("arbeitszeit").innerHTML=arbeitszeit + " Stunden";
document.getElementById("produktivitaetssteigerung").innerHTML=produktivitaetssteigerung + " Stunden";
document.getElementById("amortisationszeit").innerHTML=amortisationszeit + " Tage";
}

updated fiddle: https://jsfiddle.net/kztnmm9o/3/
Changed the testing to this:
var test = document.querySelectorAll('input[type="text"]');
var error = false;
for (var i = 0; i < test.length; ++i) {
if (test[i].value == "")
{
test[i].style.borderColor = "red";
error = true;
}
}
I also made some minor changes following this logic, but it should be pretty simple to understand.
I also added this.style.borderColor = "transparent"; to keyup event but I'm not sure whether you like or not. So change on will.

Does not execute the code after a for within a function

Good! I have a problem and you do not run my code at the end of the loop, the above and what is inside the loop works fine, the problem is that after the loop is still not executing the code. Any idea why it can be?
This is my code:
var arrayp = new Array();
function botonAdelante(tabl, pasos)
{
var padreTabla = document.getElementById(tabl).rows;
var cont = 0;
for(var j = 0; j < padreTabla.length; j++)
{
var hijoTd = document.getElementById(pasos+ "-producto-" +j);
var childArray = hijoTd.children;
for(var i = 0; i < childArray.length; i++)
{
var check = document.getElementById(pasos+ "-CheckBox-" +j);
if(check.type == 'checkbox' && check.checked==true)
{
arrayp[cont] = check.value;
var algo = arrayp[cont];
alert(arrayp[cont]);
alert(arrayp);
cont++;
continue;
};
}
}
alert("It is in this part of the code does not work");
}
Clarification: "continue" found at the end of long and if it will not work either.

The continue is confusing used like this, but I have a feeling your code is probably throwing an error because the cont might exceed the array length. Regardless of whether this fixes it or not I'd at least add a check to ensure that it doesn't throw an exception.
Please check for exceptions being thrown through web dev tools (F12 in Chrome).
for(var i = 0; i < childArray.length; i++)
{
var check = document.getElementById(pasos+ "-CheckBox-" +j);
if(check.type == 'checkbox' && check.checked==true && arrayp.length <= cont)
{
arrayp[cont] = check.value;
var algo = arrayp[cont];
alert(arrayp[cont]);
alert(arrayp);
cont++;
continue;
};
}

div onclick issue with basic "LightsOut" script

I'm just developing my skills and trying to create a js app to do the "Lights Out game" type of script that you might have seen before. Nothing complicated. Or so I thought. The idea is you start out with a grid of darkened lights, and if you click one button it toggles the state of the clicked button as well as those to the NSEW of that button. Once you click the correct sequence, all the lights are lit. My problem is basically that the divs I created are not registering a click event.
function lightUp(){
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (i= 1; 4; i++){
for (j=1; 4; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
$("#"+thisDiv, "#"+topDiv, "#"+bottomDiv, "#"+leftDiv, "#"+rightDiv).toggleClass("on").toggleClass("off");
});
}
is not registering the clicks on the divs.
<div id="r2c3" class="light off" onclick="lightUp();"></div>
It's possible this kind of script has to be much more complex, but I'm trying it out. Input is appreciated.
http://jsfiddle.net/4bUnt/3/

Ok, got it working for you. Check it out here:
http://jsfiddle.net/4bUnt/6/
Normally when giving an answer I would propose the solution and let the person re-work their code, however in this case their were quite a few syntax errors and various problems with the code, that to try to point them out one by one, step by step would have been quite cumbersome and the back and forth dialog in comments would have been too much. Maybe is why there is no other answers to this question so far.. anyway, check it out and learn from it and if you found this and a solution and/or helpful answer, please select this as the answer or up-vote it. thank you. Carry on. Good luck! :)
$( document ).ready(function() {
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (var i= 1; i<5; i++){
for (var j=1; j<5; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
if ($("#"+thisDiv).hasClass("off")) {
$("#"+thisDiv).removeClass("off").addClass("on");
$("#"+topDiv).removeClass("off").addClass("on");
$("#"+bottomDiv).removeClass("off").addClass("on");
$("#"+leftDiv).removeClass("off").addClass("on");
$("#"+rightDiv).removeClass("off").addClass("on");
} else {
$("#"+thisDiv).removeClass("on").addClass("off");
$("#"+topDiv).removeClass("on").addClass("off");
$("#"+bottomDiv).removeClass("on").addClass("off");
$("#"+leftDiv).removeClass("on").addClass("off");
$("#"+rightDiv).removeClass("on").addClass("off");
}
});
});

Hide/Show Table Columns with Javascript (fix for all browsers?)

I have a long table with many many columns and it looks really ugly for the users. What I wanted to do was create a simple button that would act as a switch, to turn on and off some of the columns.
Some of the columns are not needed, so what I did was add a class to every that wasn't needed, eg: ....
Now, what I thought I could do was this:
var hidden = 1;
function toggleTable(){
element_array = document.getElementsByClassName('disabled');
for(i = 0; i < element_array.length; i++){
if(hidden == 1){
element_array[i].style.display = 'none';
}else{
element_array[i].style.display = '';
}
}
if(hidden == 1) hidden = 0;
else hidden = 1;
}
This works for the most part in Firefox, but some quick tests in IE(7+8) and I get the following:
Message: Object doesn't support this property or method
Obviously indicating that IE doesn't want to let me simply change "display: none;" for something like table columns/rows.
I can't think of any workarounds. Ideally I'd like a fully cross-compatible solution to toggling the display of certain table columns,but if it's not compatible in the older browsers (eg: IE6) then that would also be OK.

The error that you're getting is not because IE doesn't want to set the display property, it's because the getElementsByClassName method isn't implemented in IE. If you want an implementation of that methods you can use this one which was written by Dustin Diaz.
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
Then you would re-write your method as follows.
var hidden = 1;
function toggleTable(){
var element_array = getElementsByClass('foo');
for(i = 0; i < element_array.length; i++){
if(hidden == 1){
element_array[i].style.display = 'none';
}else{
element_array[i].style.display = '';
}
}
if(hidden == 1) hidden = 0;
else hidden = 1;
}
toggleTable();

And what about jQuery.toggle()?
$(".disabled").toggle();