Dodawanie div'a - problem

0

Dzień dobry!
Chciałem stworzyć prostą tabliczkę mnożenia generowaną za pomocą javascript'u i nie wiem jak zrobić żeby div chciał się wstawić jako lastChild.
Pomocy!

<!DOCTYPE html>
<html>
<head>
	<title>tabliczka_DOM</title>
	<script type="text/javascript" src="tabliczka.js"></script>
	<link href="tabliczka.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
	<button onclick="tabliczka(11)">Przycisk</button>
<div class="container-fluid">

</div>

</body>
</html>


body {background-color: aqua}
button { background-color: yellow;}

function tabliczka (liczba) {
  for (var i = 1; i <= liczba; i++) {

    var bonjour = document.createElement("div");
    bonjour.setAttribute("class", "row");
    var destPara = document.getElementsByTagName("div")[0];
    destPara.appendChild(bonjour)
        
    for (var y = 1; y <= liczba; y++) {

    var hello = document.createElement("div");
    hello.setAttribute("class", "col-sm-1");
    hello.setAttribute("style", "background-color:" + losoj());
    hello.innerHTML = "<p>" + y * i + "</p>";
	var destParent = document.getElementsByTagName("div")[0].childNodes[0];
	destParent.appendChild(hello)
               }
        }
}
function losoj (){
	var x = Math.random()* (kolory.length - 1);
	var y = Math.floor(x);
	return kolory[y]
}
var kolory = ["#660033",
"#990033",
"#CC0033",
"#FF0033",
"#FF3366",
"#CC3366",
"#CC0066",
"#993366",
"#CC3399",
"#FF66CC",
"#FF99CC",
"#FFCCFF",
"#FF99FF",
"#FF9999",
"#FF6699",
"#FF0066",
"#FF0099",
"#FF3399",
"#FF00CC",
"#FF33CC",
"#FF66FF",
"#FF33FF"
]
0

Sprawdź funkcją alert, czy przeglądarka przechodzi przez cały kod JS.

Poza tym brakuje ci średnika w następujących miejscach:

  • destParent.appendChild(hello)
  • return kolory[y]
  • na końcu tablicy z kolorami.
0

weź zobacz konsolę błędów, daje ci błąd "tabliczka" is undefined (jak przekopiowałem ten kod i wrzuciłem na jsfiddle).

<button onclick="tabliczka(11)">Przycisk</button>

Nie wiem dlaczego, po mojemu powinno działać, ale nie mam za dużo doświadczenia w korzystaniu z atrybutu onclick (to od lat już jest niezalecane, teraz się robi się tak, że się w JS używa funkcji addEventListener do podpinania eventów - dokumentację zobacz sobie na MDN). Albo, częściej, korzysta się z bibliotek do obsługi DOM, ale na początek szedłbym jednak w addEventListener, żeby poznać, jak to działa).

EDIT:
wydaje mi się, że poprzedni błąd był spowodowany jsfiddle, ale naprawiłem sposób ładowania i dalej jest błąd. Zobacz:
https://jsfiddle.net/pv9hbmr2/11/

i odpal konsolę błędów i napisz jaki jest błąd i zastanów się dalej co z czego wynika, albo wrzuć opis błędu w Google.

(albo odpal po prostu to, co masz u siebie, to niekoniecznie musi być takie same jak case na jsfiddle, który musiałem trochę zmodyfikować).

1 użytkowników online, w tym zalogowanych: 0, gości: 1