Hello, I'm Corinne who is making a simple lottery program. The principle of operation is that you get six random digits of the winning number in lotto.html, and if you press the lottery purchase button, Pop-up pop-up.html comes out and there are 5 lines of random 6 digits At this time, compare random numbers from lotto with numbers from popUp, and in the order of matching, the first to fifth place, and the winning phrase My goal is to mark it (like an automatic lottery)
So popUp the numbers variable in lotto.js.I wanted to bring it to Js When I entered export and import, I couldn't find any random numbers in popUp.html except for the wording of the lottery result
I was wondering what's wrong with Devtool lotto.js:12 Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at randomMachine (lotto.js:12:13) at lotto.js:15:1 That's what the window. (Why did you suddenly fall on appendChild?) If you clear the import export, it will work normally without errors)
I connected the script in HTML at the end and changed the type to module, but it didn't work. I'm asking because I don't know how.
[💩Caution for dirty code]
< lotto.html >
//<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/lotto.css" />
<title>Lotto</title>
<h2 id="remain-time"></h2>
</head>
<body>
<div id="winNumBox">
<h1>Winner number of this week</h1>
<ul id="win-nums"></ul>
</div>
<div id="remainBox">
<p>Until the next lottery date:</p>
<h3 id="remain-time"></h3>
</div>
<Button id="buy-btn"> Buy Lotto</Button>
<script type="module" src="/js/lotto.js"></script>
</body>
</html>
< lotto.js >
Exportlet numbers = new Array (6) // Array of Lotto Numbers
let ul = document.getElementById('win-nums');
// Random generation of winning numbers
function randomMachine() {
for(let i = 0; i < numbers.length; i++) {
numbers[i] = Math.floor(Math.random() * 45 + 1);
let li = document.createElement('li');
li.textContent = numbers[i];
ul.appendChild(li);
}
}
randomMachine();
// a pop-up window
document.getElementById('buy-btn').onclick = popUp;
function popUp() {
window.open("popUp.html", "pop", "width= 500, height= 600, left= 100, top= 200");
}
< popUp.html >
//<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/popUp.css" />
<title> Lotto lottery results</title>
</head>
<body>
<div id="main">
<h1> Results of the lottery</h1>
<div id="numContainer">
<div class="numBox">
<h3 id="result-1"></h3>
<ul id="nums-1" class="nums"></ul>
</div>
<ul id="nums-2" class="nums"></ul>
<ul id="nums-3" class="nums"></ul>
<ul id="nums-4" class="nums"></ul>
<ul id="nums-5" class="nums"></ul>
</div>
</div>
<script type="module" src="/js/popUp.js"></script>
</body>
</html>
< popUp.js >
//// Create a random number for the pop-up window
Let numbers2 = new Array (6); // Array of Lotto Numbers
let ul1 = document.getElementById('nums-1');
let ul2 = document.getElementById('nums-2');
let ul3 = document.getElementById('nums-3');
let ul4 = document.getElementById('nums-4');
let ul5 = document.getElementById('nums-5');
// Random generation of winning numbers
function randomMachine1() {
for(let i = 0; i < numbers2.length; i++) {
numbers2[i] = Math.floor(Math.random() * 45 + 1);
let li1 = document.createElement('li');
li1.textContent = numbers2[i];
ul1.appendChild(li1);
}
}
function randomMachine2() {
for(let i = 0; i < numbers2.length; i++) {
numbers2[i] = Math.floor(Math.random() * 45 + 1);
let li2 = document.createElement('li');
li2.textContent = numbers2[i];
ul2.appendChild(li2);
}
}
function randomMachine3() {
for(let i = 0; i < numbers2.length; i++) {
numbers2[i] = Math.floor(Math.random() * 45 + 1);
let li3 = document.createElement('li');
li3.textContent = numbers2[i];
ul3.appendChild(li3);
}
}
function randomMachine4() {
for(let i = 0; i < numbers2.length; i++) {
numbers2[i] = Math.floor(Math.random() * 45 + 1);
let li4 = document.createElement('li');
li4.textContent = numbers2[i];
ul4.appendChild(li4);
}
}
function randomMachine5() {
for(let i = 0; i < numbers2.length; i++) {
numbers2[i] = Math.floor(Math.random() * 45 + 1);
let li5 = document.createElement('li');
li5.textContent = numbers2[i];
ul5.appendChild(li5);
}
}
randomMachine1();
randomMachine2();
randomMachine3();
randomMachine4();
randomMachine5();
import {numbers} from './lotto.js';
popUp.bottom of js:
import {numbers} from './lotto.js';
is not just number from lotto.js. It is correct to import something that is exported from another file, but the full execution of that other file is required.
And if you look at lotto.js:
// Random generation of winning numbers
let ul = document.getElementById('win-nums');
function randomMachine() {
for(let i = 0; i < numbers.length; i++) {
numbers[i] = Math.floor(Math.random() * 45 + 1);
let li = document.createElement('li');
li.textContent = numbers[i];
ul.appendChild(li);
}
}
randomMachine();
Declare the randomMachine() function and call the next line right away, right?
It would be fine if this call occurred in the window that loaded lotto.html, but it would be a problem if it was the window that loaded popUp.html.
Because popUp.html does not have a tag with id win-nums, ul becomes null.
© 2024 OneMinuteCode. All rights reserved.