i am new to js.trying to create a table using js.but codes are not working .what are the faults in this code?it would be a great help if anyone point out the mistakes here.
the css is here
<style>
tr{width:100%;height:100%;border:1px solid black;}
td{height:33%;width:33%;}
.tableShape{
width:300px;
height:300px;
font-size:30px;
text-align:center;
color:red;
}
</style>
js code is here
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<script>
var i,j;
var arr=new Array(3);
for(i=0;i<3;i++){
arr[i]=new Array(3);
}
for(i=0;i<3;i++){
for(j=0;j<3;j++){
arr[i][j]=1;
}}
function tabs(){
var s=document.createElement("table");
s.setAttribute('class',"tableshape");
for(i=0;i<3;i++){
var p=s.creatChild("tr");
for(j=0;j<3;j++){
var d=p.creatChild("td");
d.appendTextNode(arr[i][j]);
}
}
document.body.appendChild(s);
}
window.onLoad=tabs;
</script>
</body>
</html>
just change your tabs function like this:
function tabs() {
var s = document.createElement("table");
s.setAttribute('class', "tableshape");
for (var i = 0; i < 3; i++) {
var p = s.insertRow(i);
for (var j = 0; j < 3; j++) {
var d = p.insertCell(j);
d.innerText = arr[i][j];
}
}
document.body.appendChild(s);
}
this is your DEMO
The point is, if you are doing raw javascript like this, since tables have their specific DOM structure, you better create table rows and cells using tbl.insertRow(index) and row.insertCell(index) instead of creating every single node, and append it to the DOM.
Related
I've got an array in Javascript that I want to print to screen which is: (my function for ro[j] is simplified in this example, but that doesn't matter)
<div class="result2"></div>
<script>
var j;
var ro = [0];
for(j=0; j <= 49; j++){
ro[j] = j;
$('.result2').html(ro[j]);
}
</script>
But this doesn't work as I think it keeps replacing the div with each loop rather than adding to the div. Is there a good way to implement this? I thought you could try something like this:
<div class="result2"></div>
<script>
var j;
var ro = [0];
for(j=0; j <= 49; j++){
ro[j] = j;
if(j==0){
$('.result2').html(ro[j]);
}else{
var res = $('.result2').val();
$('.result2').html(res + ro[j]);
}
}
</script>
but this doesn't work since you can't seem to call the result of the script midway through the script? Or I just made a mistake, I'm not sure. Any help would be great!
edit: forgot a semicolon
A list element (ul or ol) should be used for lists as it's more semantically correct:
<ul id="result2"></ul>
Using es6 syntax you can append elements to that list like this:
const ro = [...Array(49).keys()]; // Just setting up a sample array
for (r of ro) {
let li = document.createElement('li');
li.innerHTML = r;
document.getElementById('result2').appendChild(li);
}
This will place the numbers vertically in the screen.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="result2"></div>
<script type='text/javascript'>
var ro = [];
for (var j = 0; j <= 49; j++) {
ro.push(j);
$('.result2').append(ro[j] + '<br />');
}
</script>
</body>
</html>
I have been trying to search this, but haven't even found anyone with the same problem.
For my assignment, I had to write a javascript code that would read all the text from the external page (from the same directory though), but that's not the problem. The problem appeared when I have created a test html file with some random text.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p> Just a random text.</p>
<h1> More of a random text</h1>
<p> And again, just testing the program.</p>
</body>
</html>
And this code is taken from the debugger:
Image of html file as from Inspector
The problem is my javascript code does read the text from this div element and append the array of words that i have.
Does anyone know why is this div generated and how to get rid of it ?
P.S I have tried creating other html files, but div appears there too.
Thanks in advance!
EDIT:
That's my JS code:
var externalPage;
var words = [];
var j = 0;
function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i][0].toString() === item.toString()) return i;
}
return -1;
}
function clearNode(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
function sortNumerically(words) {
return words.sort(function(a,b){
return b[1] - a[1];
});
}
function sortAlphabetically(words) {
return words.sort();
}
function openFile(url) {
externalPage = window.open();
externalPage.location = url;
}
function extractWords(node) {
if (node.nodeType==Node.ELEMENT_NODE) {
for (var m = node.firstChild; m!=null; m = m.nextSibling)
extractWords(m);
}
else {
var value = node.nodeValue.trim();
value = value.split(/\s/);
for(var i = 0; i < value.length; i++) {
if(indexOf(words, value[i]) != -1) {
words[indexOf(words, value[i])][1] =
words[indexOf(words, value[i])][1] + 1;
} else if(value[i] != '') {
words.push([]);
words[j][0] = value[i];
words[j][1] = 1;
j++;
}
}
}
}
function populateTable(arr) {
var tbody = document.createElement('tbody');
clearNode(tbody);
for(var i = 0; i< words.length; i++) {
var tr = document.createElement('tr');
var tdW = document.createElement('td');
var tdF = document.createElement('td');
tdW.appendChild(document.createTextNode(arr[i][0]));
tdF.appendChild(document.createTextNode(arr[i][1]));
tr.appendChild(tdW);
tr.appendChild(tdF);
tbody.appendChild(tr);
}
document.getElementById('tableCounter').appendChild(tbody);
}
function generateArray(node) {
words = [];
j = 0;
extractWords(node, words);
alert(sortNumerically(words));
populateTable(words);
}
This hidden box is an effect of a virus. The page dataloading.net is know as a virus page. You can search for it with your favourite search-module (google, bing, ...).
As attached code snap that DIV definitely come from JS or any JS plugin which simply append to body with generated code.
I'm trying to create a chess game in javascript. I created a chessboard and the next step is to add an id's and classes to created td's.
Here is the code:
<html>
<head>
<title> Play Chess! </title>
<meta charset="utf-8">
<link rel='stylesheet' href='css/styles.scss' type='text/css'/>
</head>
<body>
<script>
var table ='';
var rows =8;
var cols=8;
for (var r = 0; r<rows;r++){
table +='<tr>';
for(var c=0;c<cols;c++){
table+='<td>' +''+'</td>';
}
table+='</tr>';
}
document.write("<table border=1>"+table+'</table>');
</script>
</body>
</html>
I know I can simply do this with html, but it's too much code and I belive there is other way to do this.
Here is a solution with plain JavaScript (no jQuery). Put the script just before the closing </body> tag. This does not use document.write which really is to be avoided. Instead the HTML has an empty table with an id attribute, which then is populated through script.
var rows =8;
var cols=8;
var table = document.getElementById('board');
for (var r = 0; r<rows; r++){
var row = table.insertRow(-1);
for (var c = 0; c<cols; c++){
var cell = row.insertCell(-1);
cell.setAttribute('id', 'abcdefgh'.charAt(c) + (rows-r));
cell.setAttribute('class', 'cell ' + ((c+r) % 2 ? 'odd' : 'even'));
}
}
table {
border-spacing: 0;
border-collapse: collapse;
}
.cell { width: 20px; height: 20px; }
.odd { background-color: brown }
.even { background-color: pink }
<table id="board"></table>
As a bonus it has the chessboard altering colors, and the id values are running from a1 (bottom-left) to h8 (top-right)
If you can solve this issue by coding the layout directly inside your HTML file, you should definitely do that instead of building it dynamically in JavaScript. This is hugely less error-prone.
That being said, solving this using jQuery is not too hard:
var sideLength = 8;
var table = $('<table>');
$('#root').append(table);
for (var i = 0; i < sideLength; i++) {
var row = $('<tr>');
table.append(row);
for (var j = 0; j < sideLength; j++) {
row.append($('<td>'));
}
}
td {
border: 1px black solid;
width: 10px;
height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='root'></div>
I am trying to add css class using javascript but its not working
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) {
x[i].className += 'newclassname';
}
but when I tried changing background it works
var x = document.getElementsByClassName("oldclassname");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Am I doing anything wrong while adding css file
className is a space separated list of class names. The problem with your code is that it doesn't separate the class names with spaces. Try this:
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++)
{
x[i].className += ' newclassname'; // WITH space added
}
Without the space, it has only one class name
<div class="oldclassnamenewclassname"></div>
//if use space
<div class="oldclassname newclassname"></div>//get two class name
Better use classList:
var x = document.getElementsByClassName('oldclassname');
for (var i = 0; i < x.length; i++) {
x[i].classList.add('newclassname');
}
.newclassname { color: blue; }
<div class="oldclassname">Hello, world!</div>
Hi there is a much simpler way to do this using javascript
TO add a class: -
document.getElementsByClassName('otherClassName')[0].classList.add('newClassName');
To remove a class:-
document.getElementsByClassName('otherClassName')[0].classList.remove('newClassName');
Hope this helps :)
It works . Check your target class name formation.
Sample Code.
<html>
<head>
<style>
.classFrom{
font-family: sans-serif;
color: red;
}
.classTo{
font-family:cursive;
color: blue;
}
</style>
<script type="text/javascript">
function clickme(){
var elmList = document.getElementsByClassName('classFrom');
for (i = 0; i < elmList.length; i++)
{
elmList[i].className += " classTo";
}
}
</script>
</head>
<body>
<div class="classFrom">SampleText</div>
<button onClick="clickme()">ChangeCSS</button>
</body>
</html>
I'm a beginning programmer and I wondered if someone could help me.
I want to get a table with a row and 7 numbers in table data & making the function react. I tried this but it doesn't work, and I've been looking for some time at it now:
<html>
<head>
<script type="text/javascript">
function maaktable () {
alert("Hey!");
var tabdata
= tabrow.appendChild(document.createElement("td").innerText
= amount[i];
var tabrow = tablestart.appendChild(document.createElement("tr");
var tablestart = document.createElement("table");
tablestart;
tabrow;
for (i = 0; i < 6; i++) {
tabdata;
}
}
</script>
</head>
<body>
<button onclick="maaktable()">Begin</button>
</body>
</html>
The problem is it doesn't even alert. What can i do to make this work?
well not sure if this is the intended result but your code does look a little off
this should at least get the alert to show and hopefully get you on the right track
function maaktable () {
alert("Hey!");
var tablestart = document.createElement("table");
var tabrow = tablestart.appendChild(document.createElement("tr"));
for (i = 0; i < 6; i++) {
//tabdata;
tabrow.appendChild(document.createElement("td").innerText(amount[i]));
}
}