Poprawne przypisanie skryptu pod przycisk

0

Witam serdecznie,
na wstępie proszę o dużą wyrozumiałość względem mojej wiedzy i toku"myślenia". Staram się przeważnie wpierw znaleźć gdzieś odpowiedź na napotkane przeszkody, ale właśnie poległem. Mam skrypt, który służy do wyświetlenia informacji dotyczącej rozmiaru okna przeglądarki. Wstawiony w poniższej wersji, działa prawidłowo:

<!DOCTYPE html>
<html lang="pl">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Badnie rozmiaru okna przeglądarki</title>

       <p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Szerokość okna przeglądarki wynosi: " + w + ", a wysokość wynosi: " + h + ".";
</script>

</head>
<body>


</body>
</html>

Napotykam problem ( a raczej nie wiem jak i nie mogę znaleźć dokładnego rozwiązania) gdy próbuję zrobić z tego skryptu funkcje, która by była uruchamiana po wciśnięciu lub najechaniu na przycisk i wyświetlana w jego miejscu. Proszę wybaczyć, że nie wklejam swoich prób, ale było ich wiele i żadne nie przyniosły pożądanego efektu. Bardzo byłbym wdzięczny za wszelkie rady jak rozwiązać moją bolączkę. Pozdrawiam serdecznie

1

html

<button id="button">Klik</button>
<p id="result"></p>

js

const button = document.getElementById('button');
const result = document.getElementById('result');

function showWidth() {
	result.innerHTML = `Szerokość: ${window.innerWidth}, wysokość: ${window.innerHeight}`;
}

button.addEventListener('click', showWidth);

Działający przykład tutaj

0

Ogromnie dziękuję, muszę teraz przeanalizować dokładnie w kodzie co się z czego wynika. Dziękuję raz jeszcze !

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