Java Script + HTML losowanie z buttom

pytanie zadane 3 grudnia 2021 w JavaScript przez yellowstone Nowicjusz (130 p.)
edycja 3 grudnia 2021 przez yellowstone

Hej,
z buttom w HTML musze wysolowac liczbe z zakresu 1-100 aby wyswietliła się w divie
Teoretycznie banł, ale u mnie działa. Co robię nie tak? :(

.
.
.
<script src="loteria.js"></script>
</head>

<body>
    <header>
        <div class="header-img"></div>
    </header>
    <nav>
        <h1>LOTERIA</h1>
    </nav>
    <main>
        <table width="550" height="100">
            <tr>
                <td>
                    <h3>Wylosuj liczbę 1</h3>
                </td>
                <td><input id="button1" type="button1" class="button" value="click me">
                </td>
                <td>
                    <div id="number1"> </div>
                </td>
            </tr>
    </main>
</body>

</html>

JAVA:

const btn = document.querySelector('button1')
const number1 = document.querySelector('number1')

function randomNumber() {
	const num = Math.floor((Math.random() * 10) + 1);
	number1.textContent = num
}

btn.addEventListener('click', randomNumber)

2 odpowiedzi

odpowiedź 3 grudnia 2021 przez VBService Ekspert (253,340 p.)
edycja 3 grudnia 2021 przez VBService

Jeżeli masz kod javascript "podpięty" w <head>

<script src="loteria.js"></script>

to powoduje, że kod javascript wykonuje się szybciej niż przeglądarka przetworzyła kod html, czyli ten zapis powoduje błąd

const btn = document.querySelector('button1')
const number1 = document.querySelector('number1')

użyj zdarzenia np. window.onload [ 1 ] [ 2 ]

przykład

<table width="250" height="100">
  <tr>
    <td>
      <h3>Wylosuj liczbę 1</h3>
    </td>
    <td>
      <input type="button" id="button1" value="Losuj">
    </td>
    <td>
      <div id="number1"></div>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Wylosuj liczbę 2</h3>
    </td>
    <td>
      <input type="button" id="button2" value="Losuj">
    </td>
    <td>
      <div id="number2"></div>
    </td>
  </tr>  
</table>

// loteria.js
let buttons;

window.addEventListener('load', load);

function load() {
  buttons = document.querySelectorAll('[id^="button"]');
  
  for (button of buttons)
    button.addEventListener('click', randomNumber)
}

function randomNumber(e) {
  const num = Math.floor((Math.random() * 100) + 1);
  const id = e.target.id.replace('button', '');
  document.querySelector(`#number${id}`).textContent = num;
}

P.S.

[ CSS Selector Reference ] [ Interpolacja stringów ]

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

a jeśli potrzebuje je w trzecim wierszu dodać te dwie liczby to powinnam rozdzielić to na dwa równania?

komentarz 3 grudnia 2021 przez VBService Ekspert (253,340 p.)

Możesz to zrobić np. tak

<table width="250" height="100">
  <tr>
    <td>
      <h3>Wylosuj liczbę 1</h3>
    </td>
    <td>
      <input type="button" id="button1" value="Losuj">
    </td>
    <td>
      <div id="number1">0</div>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Wylosuj liczbę 2</h3>
    </td>
    <td>
      <input type="button" id="button2" value="Losuj">
    </td>
    <td>
      <div id="number2">0</div>
    </td>
  </tr>
  <tr>
    <td colspan="3" id="result"></td>
  </tr>
</table>

// loteria.js
let buttons, result;
 
window.addEventListener('load', load);
 
function load() {
  buttons = document.querySelectorAll('[id^="button"]');
  result = document.querySelector('#result');
   
  for (button of buttons)
    button.addEventListener('click', randomNumber)
}
 
function randomNumber(e) {
  const num = Math.floor((Math.random() * 100) + 1);
  const id = e.target.id.replace('button', '');
  document.querySelector(`#number${id}`).textContent = num;
  addNumbers();
}

function addNumbers() {
  const number1 = parseInt(document.querySelector('#number1').textContent);
  const number2 = parseInt(document.querySelector('#number2').textContent);
  result.textContent = `${number1} + ${number2} = ${(number1 + number2)}`;
}

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

To jeszcze małe pytanko:
dodaje pole wyniku, w którym ma sie wyswietlac text w zaleznosci od wygranej lub nie.
Co robię tu nie tak? :(

}
function gift() {
	buttons = document.querySelectorAll('[id^="button3"]')
	result = document.querySelector('#gift')

	for (button of buttons) button.addEventListener('click', nagroda)
}
function nagroda() {
	if (suma > 100) {
		document.getElementById('gift').innerHTML = 'TAK!'
	} else {
		document.getElementById('gift').innerHTML = 'No niestety...'
	}
}

         <td colspan="number3" id="result" style="font: size 140px">
                </td>
                <td>
                    <input type="button" id="button3" value="Sprawdź">
                </td>
            </tr>
            <tr>
                <td>
                    <br>
                <h3> Główna nagroda?</h3>
                </td>
                <td colspan="gift"></td>
            </td>
            </tr>
        </table>

komentarz 4 grudnia 2021 przez VBService Ekspert (253,340 p.)

Argument colspan elementu <td> służy do łączenia kolumn w elemencie <table>

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>    
  </tr>
  <tr>
    <td colspan="2">6</td>
    <td>7</td>
    <td colspan="2">8</td>    
  </tr>
</table>

td {
  font: 400 1.4em/1.8 monospace;
  text-align: center;
  border: 2px solid black;
  width: 100px;
}

odwołując się w ten sposób do <input>

buttons = document.querySelectorAll('[id^="button3"]');

wystarczy

button = document.querySelector('#button3');

hash # oznacza odwołanie do argumentu id elementu.

<input type="button" id="button3" value="Sprawdź">

kropka . oznacza odwołanie do argumentu class elementu.

button = document.querySelector('.button');

<input type="button" id="button3" class="button" value="Sprawdź">

czyli Twój kod mógłby wyglądać tak

<table>
  <tr>
    <td colspan="2" id="result" style="font: size 140px"></td>
    <td>
      <input type="button" id="button3" value="Sprawdź">
    </td>
  </tr>
  <tr>
    <td>
      <h3>Główna nagroda?</h3>
    </td>
    <td id="gift"></td>
  </tr>
</table>

let button, result, suma = 0;

window.onload = function() {
  button = document.querySelector('#button3');
  result = document.querySelector('#gift');

  button.addEventListener('click', nagroda);
}

function nagroda() {
  if (suma > 100)
    result.textContent = 'TAK!';
  else
    result.textContent = 'No niestety...';
}

odpowiedź 3 grudnia 2021 przez lateM Pasjonat (17,660 p.)

Zmień na pewno type="button1" na type="button". A w selektorach dodaj "#".

const btn = document.querySelector('#button1')
const number1 = document.querySelector('#number1')

Dzięki temu już jako tako działa (losuje chyba do max 10 w tej chwili?).

Ps. Zmień Java na Javascript w tytule, bo myli.

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

zmienione ale dalej niczego nie losuje

button1 bo docelowo ma byc kilka takich przycisków

komentarz 3 grudnia 2021 przez lateM Pasjonat (17,660 p.)

No u mnie po wprowadzeniu tych zmian losuje :P id możesz nazwać praktycznie dowolnie (z pewnymi wyjątkami odnośnie znaków), ale type ma stałe wartości. W tym wypadku będzie to "button" jeśli już tak to chcesz napisać.

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

W takim razie co mogę miec jeszcze nie tak?

  <main>
        <table width="550" height="100">
            <tr>
                <td>
                    <h3>Wylosuj liczbę 1</h3>
                </td>
                <td><input id="btn" type="button" class="button" value="click me">
                </td>
                <td>
                    <div id="number1"> </div>

const btn = document.querySelector('#button')
const number1 = document.querySelector('#number1')

function randomNumber() {
	const num = Math.floor(Math.random() * 10 + 1)
	number1.textContent = num
}

btn.addEventListener('click', randomNumber)

komentarz 3 grudnia 2021 przez lateM Pasjonat (17,660 p.)

id="btn" zamień na id="button" (lub button1 jak wcześniej chciałeś - tam możesz sobie numerować) tylko ta nazwa musi się zgadzać z tym co masz w nawiasach tutaj: const btn = document.querySelector('#button')

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

Faktycznie, moj blad. Ale nie zmienia to faktu ze dalej nie działa

    <script src="loteria.js"></script>

powinno byc w headzie? moze w ogole jej nie widzi?

komentarz 3 grudnia 2021 przez lateM Pasjonat (17,660 p.)

Na codepen działa w każdym razie. Jaki masz układ katalogów w projekcie? Czy html i js są na tym samym "poziomie" tzn. w tym samym folderze, czy masz np. folder "js" a w nim "loteria.js"? I czy miniaturka pliku loteria.js wygląda jak normalny plik.txt, czy jest trochę inna? Bo może masz rozszerzenie loteria.js.txt

komentarz 3 grudnia 2021 przez qax Dyskutant (8,060 p.)

Sprawdź czy jest prawidłowa ścieżka do pliku JS oraz czy cały jego kod jest zawarty wewnątrz tego:

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    // twój kod
  }
}

EDIT: Jak to nie pomoże - wyczyść całą pamięć przeglądarki ;)

komentarz 3 grudnia 2021 przez yellowstone Nowicjusz (130 p.)

Pamiec wyczyszczona, sciezka jest ok, sa w jednym folderze.

nie miałam takiego kodu w JS, ale po dodaniu nadal nie reaguje

document.onreadystatechange = function () {
    if (document.readyState === 'complete')
const btn = document.querySelector('#button1')
const number1 = document.querySelector('#number1')
function randomNumber() {
	const num = Math.floor(Math.random() * 10 + 1)
	number1.textContent = num
btn.addEventListener('click', randomNumber)
    }
}