Externí .js soubor.

Externí .js soubor.

~ Anonymní uživatel
~ 188 příspěvků

19. 11. 2021 #1

Zdravím, mám .html dokument:

<!DOCTYPE html>
<html lang="cs">
<head>
<title>Editor tabulek 19.11.2021</title>
<meta charset="utf-8" />
<script src="editor-tabulek.js"></script>
<link rel="nofollow" href="editor-tabulek.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

A k tomu .js soubor (níže). .css soubor tu uvádět nebudu, je to zbytečné. A Chrome mi (když si otevřu konzoli přes F12) vypíše kupu chyb, a já už nevím, jak je pořašit:

Chyby: Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at vytvorTlacitkoAVlozHo (editor-tabulek.js:35)
at editor-tabulek.js:82

Detaily: Na tom 35. řádku je " rodic.appendChild(btn);" a na tom 82. je toto: " function pridejRadekDolu() {
let radek = vytvorRadek();
let indexVybraneho = indexRadkuAktivniBunky();
if (tabulka.lastChild == tabulka.childNodes[indexVybraneho]) {
tabulka.appendChild(radek);
} else {
tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho + 1]);
} "

Je škoda, že z těch hlášek o chybám člověk nevydedukuje, v čem ten problém je.

Nahlásit jako SPAM

IP: 178.255.168.–

Montezo

~ Anonymní uživatel
~ 188 příspěvků

19. 11. 2021 #2

.js pro přehlednost separé.

let tabulka;
let vychoziVelikostX = 5;
let vychoziVelikostY = 3;
let aktivniBunka;

function vytvorBunku() {
let td = document.createElement("td");

let tdInput = document.createElement("input");

tdInput.type = "text";
tdInput.onfocus = function () {
aktivniBunka = this;
}
td.appendChild(tdInput);

return td;
}
function vytvorVychoziTabulku() {
tabulka = document.createElement("table");
document.body.appendChild(tabulka);
for (let y = 0; y < vychoziVelikostY; y++) {
let tr = document.createElement("tr");
tabulka.appendChild(tr);

for (let x = 0; x < vychoziVelikostX; x++) {
tr.appendChild(vytvorBunku());
}
}
}

function vytvorTlacitkoAVlozHo(popisek, rodic) {
let btn = document.createElement("button");
btn.textContent = popisek;
rodic.appendChild(btn);
return btn;
}
function vytvorOvladaciTlacitka() {
vytvorTlacitkoAVlozHo("Přidat ř.dolů", document.body);
vytvorTlacitkoAVlozHo("Přidat ř.nahoru", document.body);
vytvorTlacitkoAVlozHo("Přidat s. vlevo", document.body);
vytvorTlacitkoAVlozHo("Přidat s. vpravo", document.body);
vytvorTlacitkoAVlozHo("Odstranit ř.", document.body);
vytvorTlacitkoAVlozHo("Odstranit s.", document.body);
}
window.onload = function () {
vytvorOvladaciTlacitka();
vytvorVychoziTabulku();
}
function vytvorRadek() {
let novyRadek = document.createElement("tr");

for (let i = 0; i < tabulka.firstElementChild.childNodes.length; i++) {
novyRadek.appendChild(vytvorBunku());
}
return novyRadek;
}
/*
* table = <TABLE>
* table.firstElementChild = <TR>
* table.firstElementChild.childNodes = [<TD>]
* table.firstElementChild.childNodes.length = number
*
* table. firstElementChild. childNodes .length
* <TABLE>. <TR>. [<TD>] .length
*/
function indexRadkuAktivniBunky() {
let cilHledani = tabulka.childNodes;
let hledanyPrvek = aktivniBunka.parentElement.parentElement;
return Array.prototype.indexOf.call(cilHledani, hledanyPrvek);
}
function indexSloupceAktivniBunky() {
let bunkyVRadku = aktivniBunka.parentElement.parentElement.childNodes;
let td = aktivniBunka.parentElement;
return Array.prototype.indexOf.call(bunkyVRadku, td);
}
function pridejRadekNahoru() {
let radek = vytvorRadek();
let indexVybraneho = indexRadkuAktivniBunky();
tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho]);
}
vytvorTlacitkoAVlozHo("Přidat ř. nahoru", document.body).onclick = pridejRadekNahoru;
function pridejRadekDolu() {
let radek = vytvorRadek();
let indexVybraneho = indexRadkuAktivniBunky();
if (tabulka.lastChild == tabulka.childNodes[indexVybraneho]) {
tabulka.appendChild(radek);
} else {
tabulka.insertBefore(radek, tabulka.childNodes[indexVybraneho + 1]);
}
}
vytvorTlacitkoAVlozHo("Přidat ř. dolů", document.body).onclick = pridejRadekDolu;
function pridejSloupecDoleva() {
let indexVybraneho = indexSloupceAktivniBunky();
for (let i = 0; i < tabulka.childNodes.length; i++) {
tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho]);
}
}
function pridejSloupecDoprava() {
let indexVybraneho = indexSloupceAktivniBunky();
for (let i = 0; i < tabulka.childNodes.length; i++) {
if (tabulka.childNodes[i].childNodes[indexVybraneho] == tabulka.childNodes[i].lastElementChild) {
tabulka.childNodes[i].appendChild(vytvorBunku());
} else {
tabulka.childNodes[i].insertBefore(vytvorBunku(), tabulka.childNodes[i].childNodes[indexVybraneho + 1]);
}
}
}
vytvorTlacitkoAVlozHo("Přidat s. vlevo", document.body).onclick = pridejSloupecDoleva;
vytvorTlacitkoAVlozHo("Přidat s. vpravo", document.body).onclick = pridejSloupecDoprava;
function smazRadek() {
let indexVybraneho = indexRadkuAktivniBunky();
tabulka.removeChild(tabulka.childNodes[indexVybraneho]);
}
function smazSloupec() {
let indexVybraneho = indexSloupceAktivniBunky();
for (let i = 0; i < tabulka.childNodes.length; i++) {
tabulka.childNodes[i].removeChild(tabulka.childNodes[i].childNodes[indexVybraneho]);
}
}
vytvorTlacitkoAVlozHo("Odstranit ř.", document.body).onclick = smazRadek;
vytvorTlacitkoAVlozHo("Odstranit s.", document.body).onclick = smazSloupec;

Nahlásit jako SPAM

IP: 178.255.168.–

gna

~ Anonymní uživatel
~ 1891 příspěvků

20. 11. 2021 #3

Ten skript se spouští před definicí elementu body, takže document.body a pak parametr rodic je null.

editor-tabulek.sj:82:vytvorTlacitkoAVlozHo("Přidat ř. nahoru", document.body).onclick = pridejRadekNahoru;

editor-tabulek.sj:32:function vytvorTlacitkoAVlozHo(popisek, rodic) {
editor-tabulek.sj:33:    let btn = document.createElement("button");
editor-tabulek.sj:34:    btn.textContent = popisek;
editor-tabulek.sj:35:    rodic.appendChild(btn);

Nahlásit jako SPAM

IP: 213.211.51.–