Błąd JS - Nic się (chyba) nie wywołuje...

pytanie zadane 10 marca 2023 w JavaScript przez MarcelM Początkujący (340 p.)

Mam problem, robię coś do generowania CSS i kod mi nie działa! Funkcja "onclick" działa, bo w konsoli nawet ją uruchamiałem, ale nic się nie wywołuje...

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Generator</title>
    <script src="script.js"></script> 
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="gotowe()">
    <div id="preview">
        Tutaj jest wzór tekstu :)
    </div>
    <!--| nr 1 - rozmiar czcionki |-->
    <br />
    <div class=element >
        <h3>Rozmiar Czcionki:</h3>
        <input type=number name=fontsize id="number1" value=14 />
    </div>
    <center>
    <div class=gotowe>
        <input class=button1 type=submit value="Gotowe >" onclick="gotowe()" />
    
    </div>
    </center>
</body>
</html>

CSS:

body {
    background-color: rgb(72, 72, 72);
    color: white;
    margin: 20px;
}
.element {
    border: 2px solid black;
    width: 350px;
    height: 120px;
    border-radius: 20px;
    text-align: center;
}
.gotowe {
    margin-left: auto;
    margin-right: auto;
}
.button1 {
    background-color: rgb(49, 49, 49);
    display: block;
    width: 75px;
    height: 30px;
    cursor: pointer;
    border: 2px solid white;
    color: white;
}
.button1:hover {
    background-color: rgb(59, 56, 56);
}

JS:

function gotowe() {
var preview = document.getElementById("preview");
//font-size
var input_fontsize = document.getElementById("number1");
preview.style.fontSize = input_fontsize.value;
}

komentarz 11 marca 2023 przez VBService Ekspert (253,140 p.)

BTW, możesz zamiast

<input class="button1" type="submit" value="Gotowe >" onclick="gotowe()" />

użyć np. zdarzenia input na

<input type="number" name="fontsize" id="fontsize" value="14" />

[ on-line ]

window.onload = () => {
  document.getElementById('fontsize').addEventListener('input', setFontSize);
}

function setFontSize({target}) {
  const preview = document.getElementById('preview');  
  preview.style.fontSize = target.value + 'px'; 
}

1 odpowiedź

odpowiedź 10 marca 2023 przez Comandeer Guru (600,810 p.)

Przypisujesz do style.fontSize zawartość pola, czyli samą liczbę – a to jest niepoprawna wartość w CSS-ie, bo brakuje jednostki. Musiałbyś dodawać do tej liczby px.