We Keep Coding

Add button in javascript without using html

I'm trying to add a button in javascript file without using HTML bacsue I need to have it in the column inside the loop, but when I click on the button to call the function it shows the error that its looking on that button in HTML file!
how could I fix that?
function success(name) {
let info = "<div class='infoTable'>";
for (let i = 0; i < name.length; i++) {
info += "<div class='info'>";
info += "<div class='fcol'>" + (i+1) + "</div>";
info += "<div class='scol'>" + name[i].item + "</div>";
info += "<div class='fcol'>" + name[i].quantity + "</div>";
info += '<button onclick="deletee(\'' + name[i].ID + '\')"> Delete This<button />';
info += "</div>";
}
info += "</div>";
printItems.innerHTML = info;
}
this is the function
function deletee(id){
let url = "server/delete.php?id=" + id;
console.log(url);
fetch(url, { credentials: 'include' })
.then(response => response.text())
.then(getList)
}
this is the error
(index):1 Uncaught ReferenceError: deletee is not defined
at HTMLButtonElement.onclick ((index):1)
onclick # (index):1

The best solution in this case is using document.createElement: https://www.w3schools.com/jsref/met_document_createelement.asp
It's better practice than converting a string to DOM Elements.
Since you did not post all your code, we cannot assist further if we cannot see the function you are trying to execute.
The reason why I am suggesting using JS and not converting a string to DOM, is most IDE's will identify missing, misspelt, or incorrectly used functions. Which could've been your mistake.
Here is an example:
var colsToAdd = 5;
var rowsToAdd = 25;
function FillTable() {
//Get existing table or create a new one. Append to parent if create
var table = document.getElementById("testTable");
//Clear table
table.innerHTML = "";
//Create your rows using a for loop
for (var i = 0; i < rowsToAdd; i++) {
var row = document.createElement("TR");
table.appendChild(row);
//Create your columns using a for loop
for (var k = 0; k < colsToAdd; k++) {
{
var col = document.createElement("td");
row.appendChild(col);
if (k == colsToAdd - 1) {
var button = document.createElement("button");
button.type = "button";
//Button click event is an anonymous function
button.onclick =
function(r) {
return function() {
table.removeChild(r);
}
}(row)
button.innerHTML = "Delete";
col.appendChild(button);
} else {
col.innerHTML = "row " + i + " column " + k;
}
}
}
}
}
table {
border: 1px solid #000;
margin: 1em;
}
td {
border: 1px solid #000;
padding: 1em;
}
<div>
<h1>Heading</h1>
<button onclick="FillTable()">Fill table</button>
<table id="testTable">
</table>
</div>

How to add class by referring to array in html table

I would like to addclass in 2nd row, by referring to array and its index.
I prepared array and all that remains to add class by referring to index.
through my work, it didn't work well.
How can I achieve them?
Thanks
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class=color></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14].map(String);
$("td .color")
.filter(function() { return $(this).index(arr); })
.addClass('red');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>

You should not have any space between the tag name and the class if both refer the same element. You can use includes() to check if the index + 1 is exists in the array or not.
Try the following way:
let html = ''
html += '<table>';
let i = 0;
html += '<tr>';
for (let d = 0; d < 15; d++) {
i = i + 1;
html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
}
html += '</tr>';
for (let w = 0; w < 1; w++) {
html += '<tr>';
for (let d = 0; d < 15; d++) {
html += '<td class=color></td>'
}
html += '</tr>';
}
html += '</table>'
document.querySelector('#calendar').innerHTML = html;
const arr = [1, 2, 10, 11, 14];
$("td.color")
.filter(function() { return arr.includes($(this).index()+1); })
.addClass('red');
td {
transition-duration: 0.5s;
border: solid black 1px;
cursor: pointer;
}
div {
padding: 5px;
}
table {
border-collapse: collapse;
}
.color{
padding:5px;
}
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=calendar></div>

You could tidy up your loops a bit by first building the indexes, and then use backquote to clean up your html template.
Note: you should be using double quotes for attributes eg class="color"
const columnCount = 15;
const columnIndexes = [...Array(columnCount).keys()]; // make array of indexes
const rowsCount = 1;
const rowIndexes = [...Array(rowsCount).keys()];
const html =
`<table>
<tr>
${columnIndexes.map(c =>
`<td data-layer="0"><div>${c + 1}</div></td>
`)}
</tr>
${rowIndexes.map(r =>
`<tr>
${columnIndexes.map(c =>
`<td class="${r % 2 === 0 ? 'red' : ''}"></td>`
)}
</tr>`
)}
</table>
`

function includes in javascript

I want to get the same value on string after split
If I have the numbers (as a string): 1,6,18,2 and I use .includes I get an output which looks like this: 1,2,6,8,18
How can I get same with that string -> 1,2,6,18
This is my code in js :
trHTML = '';
total = 20;
var antrian = $('#antrian').val(); // 1,6,18,2
for(i = 1; i <= total; i++){
if(antrian.includes(i)){
trHTML += <button style="background-color: gray;"> '+ i +'</button>';
} else {
trHTML += <button style="background-color: red;"> '+ i +'</button>';
}
}
From that code I got button output button with number, if I consol.log(trHTML) the output is 1,2,6,18 but output in HTML is gray button 1,2,6,8,18 and others is red button
How can I got grey button with number 1,2,6,18 or same with console.log(trHTML) ?
Can someone help me or give me an example?

The reason why 8 is included in 1,6,18,2 is that there is an 8 in the string. One option is make antrian an array using split()
var trHTML = ''; //Add var
var total = 20; //Add var
var antrian = $('#antrian').val().split(","); //Add split() - this will return to [1,6,18,2]
for(var i = 1; i <= total; i++){ //Add var on i
if(antrian.includes(i.toString())){
trHTML += '<button style="background-color: gray;"> '+ i +'</button>';
} else {
trHTML += '<button style="background-color: red;"> '+ i +'</button>';
}
}

Using httpRequestXML to request a xml document how would you strip out the information from the xml document using javascript

I need help with running an if and else statement that will retrieve certain amounts of entries using XMLRequest and only return 10 entries instead of 30. I would like some assistance on how to make a function that will get the next set of entries so an example would be get 5 entries the first time and then 2nd click get 10 entries and so on.. I have been stuck and really would like to understand what I am not seeing clearly
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX High Score Example</title>
<style>
body { background-color: lightgreen; }
h1 { color: black;
text-align: center;}
button { display: block;
margin-left: auto;
margin-right: auto; }
#box1 { background-color: grey;
color: green;
border: 2px solid black;
width: 550px;
padding: 20px;
margin-left: auto;
margin-right: auto; }
th, td { color: black;
min-width: 120px;
text-align: center;
border: 1px solid black;}
table { margin: 20px auto 0px auto;
border: 5px solid black;
background-color: yellow;}
</style>
</head>
<body>
<h1>Cedrics Music List 1990 XML Part A</h1>
<div id="box1"></div>
<button type="button" onclick="getScores()">Display
Scores</button>
<script>
var request1;
var ratingValue = new Array();
var trackValue = new Array();
var singerValue = new Array();
var arraySelected = 0;
function getScores() {
request1 = new XMLHttpRequest();
request1.onreadystatechange = callback;
request1.open("GET", "topSongs1990.xml", true);
request1.send();
}
function callback() {
if ((request1.readyState == 4) && (request1.status ==
200)) {
var parser;
var xmlDoc;
var scoreDataXML = request1.responseText;
console.log(scoreDataXML);
parser = new DOMParser();
xmlDoc =
parser.parseFromString(scoreDataXML,"text/xml");
var outputs = xmlDoc.getElementsByTagName("entry");
console.log(outputs);
var output = "<table>";
output += "<tr><th>RATING</th><th>TRACK</th>
<th>SINGER</th></tr>";
if (arraySelected > 0; arraySelected < 10; ) {
ratingValue[i].getElementsByTagName("rating")
[0].childnodes[0].nodeValue + "</td><td>"
+ trackValue[i].getElementsByTagName("track")
[0].childnodes[0].nodeValue + "</td><td>"
+ singerValue[i].getElementsByTagName("singer")
[0].childnodes[0].nodeValue + "</td><td>";
document.getElementsByTagName("entry").innerHTML;
}else if (arraySelected > 10; arraySelected > 20; ){
} else {
for(i=0; i < outputs.length; i++) {
var ratingElement =
outputs[i].getElementsByTagName("rating");
var trackElement =
outputs[i].getElementsByTagName("track");
var singerElement =
outputs[i].getElementsByTagName("singer");
var s1 = ratingElement[0].firstChild.nodeValue;
var i1 = trackElement[0].firstChild.nodeValue;
var d1 = singerElement[0].firstChild.nodeValue;
/*ratingValue[i] = s1;
trackValue[i] = i1;
singerValue[i] = d1;*/
var row = "<tr>";
row += "<td>" + s1 + "</td>";
row += "<td>" + i1 + "</td>";
row += "<td>" + d1 + "</td>";
row += "</tr>";
output += row;
}
/*console.log("The rating Array is " + ratingValue);
console.log("The initials Array is " + trackValue);
console.log("The dates Array is " + singerValue); */
output += "</table>";
document.getElementById("box1").innerHTML = output;
}
}
</script>
</body>
</html>
I would like to have my function spit out 10 entries per click and if im able to complete that I would like to know how to decrement those values.
(im actually really new to javascript, so I apologize)
I keep getting errors because I cant properly form the right syntax
ajaxXML6Modified.html:31 Uncaught ReferenceError: getScores is not
defined
at HTMLButtonElement.onclick (ajaxXML6Modified.html:31)
onclick # ajaxXML6Modified.html:31
Constructive Criticism Welcomed

Removing the space between cells of a grid [duplicate]

This question already has answers here:
Space between <td>. Why and how can I remove?
(7 answers)
Closed 6 years ago.
I want to remove the spaces between the cells so that the grid looks kind of like graph paper. There is a small space between the cells right now and I would like to remove that that.
Here is that I have now:
function generateGrid(rows, cols) {
var grid = "<table>";
for (row = 1; row <= rows; row++) {
grid += "<tr>";
for (col = 1; col <= cols; col++) {
grid += "<td></td>";
}
grid += "</tr>";
}
return grid;
}
$("#tableContainer").append(generateGrid(5, 5));
$("td").click(function() {
var index = $("td").index(this);
var row = Math.floor((index) / 5) + 1;
var col = (index % 5) + 1;
$("span").text("That was row " + row + " and col " + col);
$(this).css('background-color', 'red');
});
td {
border: 1px solid;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Select a cell!</span>
<div id="tableContainer"></div>

In your CSS:
table {
border-collapse: collapse;
}

table {
border-collapse: collapse;
}
th, td {
padding: 0;
}