I am using phantom js 2.1.1 in windows 7. I am trying to print all innerhtml of list items.
my code
var nl =pageCv.evaluate(function(){
return document.querySelectorAll("#main_tabs > ul >li");
});
console.log('main tab Lenght :' + nl.length);
for (var i=0; i<nl.length; i++) {
console.log('id of ' + nl[i].innerHTML);
}
gettting this error
main tab Lenght :3
TypeError: null is not an object (evaluating 'nl[i].innerHTML')
How do I print all the innerHTML of node list?
Please help me
var nl = pageCv.evaluate(function(s) {
var simpleArray = [],
forEach = Array.prototype.forEach,
nodes = document.querySelectorAll("#main_tabs > ul >li");
forEach.call(nodes, function(el){
simpleArray.push(el.innerHTML);
});
return simpleArray;
}, 'something');
console.log('main tab Lenght :' + nl.length);
for(var i=0; i < nl.length; i++)
{
console.log(nl[i]);
};
Related
We have successfully added the following script to all/most pages, but it will not fire on the following page and I'm stumped. Our ultimate goal is to transfer all UTM parameters to any vehicle selected on the page.
Any help would be greatly appreciated.
https://www.cardoor.ca/used-vehicles/
(function() {
var domainsToDecorate = [
'cardoor.ca' //add or remove domains (without https or trailing slash)
],
queryParams = [
'utm_medium', //add or remove query parameters you want to transfer
'utm_source',
'utm_campaign',
'gaw_campaign_id',
'gaw_ad_group_id',
'gaw_remote_client_id',
'fbclid',
'gclid'
]
// do not edit anything below this line
var links = document.querySelectorAll('a');
// check if links contain domain from the domainsToDecorate array and then decorates
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) { if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
links[linkIndex].href = decorateUrl(links[linkIndex].href);
}
}
}
// decorates the URL with query params
function decorateUrl(urlToDecorate) {
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
return urlToDecorate + collectedQueryParams.join('&');
}
// borrowed from https://stackoverflow.com/questions/831030/
// a function that retrieves the value of a query parameter
function getQueryParam(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
return decodeURIComponent(name[1]);
}
})();`
We are on WordPress, so I am a bit limited in the containers I can add this to but I have tried in the 2 available to me. I have tried to move it as high on the page as possible but to no avail.
I’m new to both Ionic and Vue.js. I’m taking advantage of this summer break to start learning both.
I’m building a mobile app for this purpose and so far, so good. However, I have found and issue that I hope you could help me with. Namely, how to fetch or “call” data from one file to another (Is it called routing?).
In my app, I am trying to start/open a function named myFunction() from one of the pages (quiz.vue) when I call it using v-on:click="myFunction3".
This function is located in a JS file called quizz.js, and it is located in the assets folder. This is its path: (“./assets/js/quizz.js”).
I have tried many things to make it work and finally it is working as it should. However, I think my solution is not optimal as it keeps throwing “Uncaught TypeErrors” in the console of the Developer’s Tool…even though it works.
My solution was to push the function inside methods: this.$router.push(myFunction3())
Also, when running the app, it says that myFunction() , and other functions in the same quizz.js file, “is define but never used”.
If you could advise me with anything, I would be most grateful. I am still a beginner so please explain it to me in as simple a manner as possible.
methods:{
openMenu(){
menuController.open("app-menu")
},
myFunction3(){
this.$router.push(myFunction3())
},
Below, the quizz.js file:
var mlhttp = new XMLHttpRequest();
mlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
const quiz = myObj.results[0]['question'];
const correctAnswer = myObj.results[0]['correct_answer'];
const incorrect = myObj.results[0]['incorrect_answers'];
incorrect.push(correctAnswer);
shuffle(incorrect);
document.getElementById("ans").innerHTML = quiz;
var text = "";
var val = 0;
var i;
for (i = 0; i < incorrect.length; i++) {
if(incorrect[i] == correctAnswer){
text += "<ion-button fill='outline' id='right' onClick='increment();myFunc();'/><b>" + incorrect[i] + "</b></ion-button></br>";
val = val + 1;
}else{
text += "<ion-button fill='outline' class='wrong' onClick='myFunc2();'/><b>" + incorrect[i] + "</b></ion-button></br>";
}
}
document.getElementById("ans5").innerHTML = text;
}
};
var j=0;
function myFunction3() {
document.getElementById("ans6").innerHTML = "";
mlhttp.open("GET", "https://opentdb.com/api.php?amount=1", true);
mlhttp.send();
j++;
document.getElementById('ans11').innerHTML=j;
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function myFunc(){
document.getElementById("ans6").innerHTML = "<h1 style='color:green'><i class='fa fa-check'></i> That is correct!</h1>";
document.getElementById("right").style.color = "white";
document.getElementById("right").style.backgroundColor = "green";
var audio = new Audio('./assets/sound/win.mp3');
audio.play();
}
function myFunc2(){
document.getElementById("ans6").innerHTML = "<h1 style='color:red'><i class='fa fa-thumbs-down' ></i>Wrong Answer! </h1>";
document.getElementById("right").style.color = "white";
document.getElementById("right").style.backgroundColor = "green";
var x = document.getElementsByClassName("wrong");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "rgba(255, 0, 0, 0.8)";
x[i].style.color = "white";
}
//document.getElementById("wrong").style.color = "red";
var audio = new Audio('./assets/sound/wrong.mp3');
audio.play();
}
var i=0;
function increment() {
i++;
document.getElementById('ans10').innerHTML=i;
}
The home page on my app has a swipable carousel
`{
xtype : 'carousel',
id:'myCar',
autoDestroy:false,
styleHtmlContent:true,
padding:'0 0 0 0',
height:100
}`
I have a painted listener function on my view which add items to my carousel dynamically.
`var store = Ext.getStore("inspirationStore");
var car = Ext.getCmp('myCar');
var items = car.getItems();
//destroy all items within this container before populating
if (items.length > 1){
for (var j = 0; j < items.length; j++){
items[j].destroy();
}
}
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+ store.getAt(i).data.message + '</b></p>' + '<p class = "authorName"><b>' + store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
car.add(item);
}`
The carousel works fine the first time ,But when I go To another page then come back to my home page my carousel doesnt swipe. I could see that items are added but the carousel is not working the way it should. Any suggestions?
use setItems( Array/Object items ) which
Sets the value of items.
docs
Instead of adding items in loop try this:
var items = [];
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+
store.getAt(i).data.message + '</b></p>' +
'<p class = "authorName"><b>' +
store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
items.push(item);
}
car.add(items);
How can I clear all the text boxes of a div from client side, in which the parent not contains any from tags.?
Thanks
If you put a classname on the divs:
var nodes = dojo.query(".className");
for(var x = 0; x < nodes.length; x++)
{
nodes[x].value = "";
// nodes[x].innerHMTL = "";
}
Or you may get the nodes with somethign like this:
var nodes = dojo.query("div>input[type='text']");
(I did not test :-/)
Adding on unludo's answer (and if using dojo 1.7):
require(["dojo/query"], function(query){
query("div > input[type='text']").forEach(function(node){
node.value = "";
});
});
if dojo < 1.7
dojo.query("div > input[type='text']").forEach(function(node){
node.value = "";
});
Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.
The script below can be replaced with the script in the "example1-simple.html" viewed here.
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.
The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.
The grid is getting initialized before the AJAX call to get the additional columns completes.
Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:
grid.setColumns(dynamicColumns);