appenChild is not a function in my php page - javascript

Hello everyone why it returns "appenChild is not a function?"
function showBooks(ajax) {
var books = ajax.responseXML.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var titleNode = books[i].getElementsByTagName("title")[0];
var authorNode = books[i].getElementsByTagName("author")[0];
var title = titleNode.firstChild.nodeValue;
var author = authorNode.firstChild.nodeValue;
var year = books[i].getAttribute("year");
var li = document.createElement("li");
li.innerHTML = title + ", by " + author + " (" + year + ")";
$("books").appendChild(li);
}
In a page where i don't include theese it works. If I include theese js it doesn't work. I need all theese javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="js/bootstrap.min.js" ></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
I can't work so much on javascript, sorry

$("books") is a jQuery Object, not a HTMLElement, so it does not have HTMLElement Methods, like appendChild. What jQuery Objects have is $(...).append(), which works for your case:
function showBooks(ajax) {
var books = ajax.responseXML.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var titleNode = books[i].getElementsByTagName("title")[0];
var authorNode = books[i].getElementsByTagName("author")[0];
var title = titleNode.firstChild.nodeValue;
var author = authorNode.firstChild.nodeValue;
var year = books[i].getAttribute("year");
var li = document.createElement("li");
li.innerHTML = title + ", by " + author + " (" + year + ")";
$("#books").append(li); // use jQuery append method instead of appendChild
}
}
Or you can get the underlying HTMLElement, and use appendChild on it:
function showBooks(ajax) {
var books = ajax.responseXML.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
var titleNode = books[i].getElementsByTagName("title")[0];
var authorNode = books[i].getElementsByTagName("author")[0];
var title = titleNode.firstChild.nodeValue;
var author = authorNode.firstChild.nodeValue;
var year = books[i].getAttribute("year");
var li = document.createElement("li");
li.innerHTML = title + ", by " + author + " (" + year + ")";
$("#books").get(0).appendChild(li)); // use appendChild on the HTMLElement
}
}

Related

send array data in input values using Javascript or JQuery and AspNet Core MVC To Controller function and insert MsSQL?

I using AspNet Core MVC,
I want design dynamic system.
User enter sql query and save to database.
I can get this sql queries, delete 'select' and 'from....' and getting column names.
and slice column names with ','. and adding to an array.
but how can send this array values to Controller.
I don't using Model because I don't know how many column so I don't know how many declare variable in Model.
My Code:
`
<script>
$(document).ready(function(){
var k = [];
var input = document.getElementsByName('SqlQuery[]');
var input1 = document.getElementsByName('ReportId[]');
var input2 = document.getElementsByName('FolderId[]');
var testRE = new Array();
var columnArray = new Array();
for (var i = 0; i < input.length; i++) {
var a = input[i];
var b = input1[i];
var c = input2[i];
k.push([[a.value],[b.value],[c.value]]);
}
for(var i=0;i<k.length;i++){
var fString = 'select';
var sString = 'from';
var regExString = new RegExp("(?:" + fString + ")((.[\\s\\S]*))(?:" + sString + ")", "ig");
testRE.push(regExString.exec(k[i][0]) + " , " + k[i][1] + " , " + k[i][2]);
}
for(var i=0;i<testRE.length;i++){
columnArray.push([testRE[i].trim().replace(/10,/g, '10.').split(",")]);
var Degerler = {
val""+i = columnArray[i];
}
console.log(columnArray[i]);
$.ajax({
type:'POST',
url: '/Graphic/InsertColumns',
dataType: 'text/javascript',
data:{
columnArray : ValidityState""+i
},success:function(){
},error:function(){
}
});
}
});
</script>
`
`
<script>
$(document).ready(function(){
var k = [];
var input = document.getElementsByName('SqlQuery[]');
var input1 = document.getElementsByName('ReportId[]');
var input2 = document.getElementsByName('FolderId[]');
var testRE = new Array();
var columnArray = new Array();
for (var i = 0; i < input.length; i++) {
var a = input[i];
var b = input1[i];
var c = input2[i];
k.push([[a.value],[b.value],[c.value]]);
}
for(var i=0;i<k.length;i++){
var fString = 'select';
var sString = 'from';
var regExString = new RegExp("(?:" + fString + ")((.[\\s\\S]*))(?:" + sString + ")", "ig");
testRE.push(regExString.exec(k[i][0]) + " , " + k[i][1] + " , " + k[i][2]);
}
for(var i=0;i<testRE.length;i++){
columnArray.push([testRE[i].trim().replace(/10,/g, '10.').split(",")]);
var Degerler = {
val""+i = columnArray[i];
}
console.log(columnArray[i]);
$.ajax({
type:'POST',
url: '/Graphic/InsertColumns',
dataType: 'text/javascript',
data:{
columnArray : ValidityState""+i
},success:function(){
},error:function(){
}
});
}
});
</script>
`

Javascript - setValue returns #ERROR into a cell

I'm really new to Javascript and pretty much copied most of the code and modified it a bit. Sometimes I'm getting an error putted into a cell and sometimes the correct values. Do you know what is the issue?
for (p=3; p < 19; p=p+3){
var Value = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(9,p);
var outputValue = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(counter.getValue(),(3 + a));
outputValue.setValue(Value.getValue());
a = a +1;}
I'm adding the whole code as well for reference:
function getData() {
var queryString = Math.random();
var i;
for (i=2; i < 8; i++) {
var AddressColumn = SpreadsheetApp.getActiveSheet().getRange("W1").getColumn();
//if (ValueCrypto>0)
var cellFunction1 = '=Value(Replace(IMPORTXML("' + SpreadsheetApp.getActiveSheet().getRange(i,AddressColumn).getValue() + '?' + queryString + '","'+ SpreadsheetApp.getActiveSheet().getRange(1,AddressColumn).getValue() + '"),1,1,))*X1';
SpreadsheetApp.getActiveSheet().getRange(i,3).clearContent(); // You can also use range.setFormula("");
SpreadsheetApp.flush();
SpreadsheetApp.getActiveSheet().getRange(i,3).setValue(cellFunction1);
var cellFunction2 = '=Value(Replace(IMPORTXML("' + SpreadsheetApp.getActiveSheet().getRange(i,AddressColumn).getValue() + '?' + queryString + '","'+ SpreadsheetApp.getActiveSheet().getRange(1,AddressColumn).getValue() + '"),1,1,))';
SpreadsheetApp.getActiveSheet().getRange(i,8).clearContent(); // You can also use range.setFormula("");
SpreadsheetApp.flush();
SpreadsheetApp.getActiveSheet().getRange(i,8).setValue(cellFunction2);
}
//var cellFunction2 = '=IMPORTXML("' + SpreadsheetApp.getActiveSheet().getRange('A4').getValue() + '?' + queryString + '","'+ SpreadsheetApp.getActiveSheet().getRange('A5').getValue() + '")';
//SpreadsheetApp.getActiveSheet().getRange('C2').setValue(cellFunction2);
counter2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange("A12").getValue();
SpreadsheetApp.getActiveSheet().getRange("A12").setValue(counter2+1)
if (counter2 = 3) {recordValue();}
}
function recordValue() {
SpreadsheetApp.getActiveSheet().getRange("A12").setValue(0);
var counter = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange("A13");
//console.log(counter)
var dateCell = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(counter.getValue(),2);
dateCell.setValue(new Date());
//const errorValues = ["#N/A", "#REF", "#ERROR!"];
var a = 0;
for (p=3; p < 19; p=p+3){
var Value = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(9,p);
var outputValue = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(counter.getValue(),(3 + a));
outputValue.setValue(Value.getValue());
a = a +1;
}
var TotalValue = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange("R2");
var outputTotalValue = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(counter.getValue(),17);
outputTotalValue.setValue(TotalValue.getValue());
var TotalValue2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange("R5");
var outputTotalValue2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1").getRange(counter.getValue(),18);
outputTotalValue2.setValue(TotalValue2.getValue());
counter.setValue(counter.getValue() + 1);
if(counter.getValue() > 300){counter.setValue("14");}}

How do I access variable while looping through

I have this piece of code
(function() {
'use strict';
// Returns current URL page.
var currentURL = window.location.protocol + "//" + window.location.host + "/" +
window.location.pathname + window.location.search
var market_table = document.getElementById("market_item_table");
var market_table_cells = document.getElementsByTagName("td");
var rowLength = market_table.rows.length;
var items = document.querySelectorAll('div[data-item-id]')
var j = 0;
items.forEach(function(getItem) {
var itemData = items[j].dataset;
var tooltip = JSON.parse(itemData.tooltip)[0][0][0];
console.log(tooltip);
j++
});
for (var i = 1; i < rowLength; i++) {
var oCells = market_table.rows.item(i).cells;
console.log("Paka nr. " + i + "Nazwa przedmiotu: " + tooltip + ' ' +
oCells[1].innerText + ' ' + oCells[2].innerText);
}
})();
Now how would I go about and get the value of variable tooltip every time it loops through the NodeList?
The bigger picture is that I want to assign the correct names to the correct items listed.
You can set up an array outside of the for loop that stores the values of the tooltips, then use it in a separate function:
var tooltips = [];
Items.forEach(function(getItem) {
var itemData = getItem.dataset;
var tooltip = JSON.parse(itemData.tooltip)[0][0][0];
console.log(tooltip);
});
for (var i=0; i < rowlength... {
// Do something with the tooltips
console.log(tooltips[i]);
}

For loop not working with innerHTML

I have a for loop that has innerHTML in it and I cannot figure out why it is not working. The code is as below:
<head>
<script language="javascript">
function afterload()
{
for(var n=1; n<11; n++)
{
document.getElementById("item"+n).innerHTML = window.opener.document.getElementById("item"+n).value;
document.getElementById("prc"+n).innerHTML = window.opener.document.getElementById("prc"+n).value;
document.getElementById("qty"+n).innerHTML = window.opener.document.getElementById("qty"+n).value;
document.getElementById("amt"+n).innerHTML = window.opener.document.getElementById("totl"+n).value;
}
}
</script>
</head>
<body onload="afterload()">
</body>
In the body there are table data with the ids above i.e. item1, prc1, qty1 and amt1 and they run up to 10. the parent window also has input fields with the above ids and they also run to 10. The most confusing thing is that if I remove the for loop and write the actual ids of the fields, it works perfectly.
<head>
<script language="javascript">
function afterload()
{
var item = document.getElementById("item");
var itemvalue = document.getElementById("item").value;
var prc = document.getElementById("prc");
var prcvalue = document.getElementById("prc").value;
var qty = document.getElementById("qty");
var qtyvalue = document.getElementById("qty").value;
var amt = document.getElementById("amt");
var amtvalue = document.getElementById("totl").value;
for(var n=1; n<11; n++)
{
item.innerHTML += (itemvalue + "*" + n + "=" + (itemvalue*n) + "<br />");
prc.innerHTML += (prcvalue + "*" + n + "=" + (prcvalue*n) + "<br />");
qty.innerHTML += (qtyvalue + "*" + n + "=" + (qtyvalue*n) + "<br />");
amt.innerHTML += (amtvalue + "*" + n + "=" + (amtvalue*n) + "<br />");
}
}
</script>
</head>
<body onload="afterload()">
</body>
function innerHtml(n)
{
document.getElementById("item"+n).innerHTML = window.opener.document.getElementById("item"+n).value;
document.getElementById("prc"+n).innerHTML = window.opener.document.getElementById("prc"+n).value;
document.getElementById("qty"+n).innerHTML = window.opener.document.getElementById("qty"+n).value;
document.getElementById("amt"+n).innerHTML = window.opener.document.getElementById("totl"+n).value;
}
function afterload()
{
for(var n=1; n<11; n++)
{
innerHtml(n);
}
}
Hope its help!

localStorage issue - Items not displayed (JSON/JQUERY)

I'm trying to get and sort all the items in localStorage and output it to an HTML page.
This is what I'm doing:
<script>
function ShoppingCart() {
var totalPrice = 0;
var output;
var productName;
var productAlbum;
var productQuantity;
var productPrice;
var productSubTotal = 0;
var totalPrice;
for (var i = 0; i < localStorage.length-1; i++){
var keyName = localStorage.key(i);
if(keyName.indexOf('Product_')==0) // check if key startwith 'Product_'
{
var product = localStorage.getItem('Product_'+i);
var result = JSON.parse(product);
var productName;
var productAlbum;
var productQuantity;
var productPrice;
var productSubTotal = 0;
var totalPrice;
productName = result.name
productAlbum = result.album;
productQuantity = result.quantity;
productPrice = parseFloat(result.price).toFixed(2);
productSubTotal = parseFloat(productQuantity * productPrice).toFixed(2);
outputName = "<div id='cart-table'><table><tr><td><b>NAME: </b>" + productName + "</td></tr></div>" ;
outputAlbum = "<tr><td><b>ALBUM: </b>" + productAlbum + "</td></tr>" ;
outputQuantity = "<tr><td><b>QUANTITY: </b>" + productQuantity + "</td></tr>";
outputPrice = "<tr><td><b>PRICE: </b> EUR " + productPrice + "</td></tr>";
outputSubTotal = "<tr><td><b>SUB-TOTAL: </b> EUR " + productSubTotal + "</td></tr></table><br><br>";
var outputTotal = "<table><tr><td><b>TOTAL:</b> EUR " + totalPrice + "</td></tr></table>";
var TotalOutput = outputName + outputAlbum + outputQuantity + outputPrice + outputSubTotal + outputTotal;
document.getElementById("Cart-Contents").innerHTML=TotalOutput;
}
}
alert(TotalOutput);
}
window.onload = ShoppingCart;
</script>
The only item that is being output is the item named 'Proudct_0' in localStorage. Others are not being displayed!
This is what I have in localStorage: http://i.imgur.com/sHxXLOL.png
Any idea why this is happening ?
something wrong in your code.
What do you think if Product_0 not in the localStorage?
var product = localStorage.getItem('Product_'+i);
var result = JSON.parse(product);
may be null and throw an error.
Try this:
for (var i = 0; i < localStorage.length-1; i++){
var keyName = localStorage.key(i);
if(keyName.indexOf('Product_')==0) // check if key startwith 'Product_'
{
var product = localStorage.getItem(keyName);
//do your code here
}
}
Update
document.getElementById("Cart-Contents").innerHTML=TotalOutput;
it's replace, not append
Hope this help!

Categories

Resources