Не удается заставить условие работать с div?

#javascript #if-statement #conditional-statements

Вопрос:

Я хочу, чтобы размер шара соответствовал подсказке пользователя при вводе, и что-то не работает, не могу сказать, что я делаю неправильно.

 <style>
    body {
        background-color: black;
        text-align: center;
    }
    h1 {
        color: white;
    }
    div {
        width: 100px;
        height: 100px;
        margin: auto;
        margin-bottom: 10px;
        border-radius: 50%;
        transition: 0.3s;
        line-height: 50px;

    .ball4 {
        background-color: brown;
    }
</style>
 
 <div class="ball4" onclick="onBall4Click()">
    PROMPT
</div>

<script>

    
    function onBall4Click() {
        var ball4 = document.querySelector('.ball4');
        var ball4Size = prompt("Size of ball? ");

        if (ball4Size > 1000) {
            alert("Too big!")
        } else {
            var ball4Size = size;
        }
    }
</script>
 

Заранее спасибо помощникам.

Комментарии:

1. Ты не определил size .

Ответ №1:

Я чувствую, что это то, что вы хотите с вашим JavaScript:

 function onBall4Click() {
    var ball4 = document.querySelector('.ball4');
    var ball4Size = prompt("Size of ball? ");

    if (ball4Size > 1000) {
        alert("Too big!")
    } else {
        ball4.style.width = ball4Size;
        ball4.style.height = ball4Size;
    }
}
 

Вы использовали неопределенную переменную, а не устанавливали фактический размер элемента. Кроме того, я считаю, что на данный момент вам все еще нужно сделать элемент шаром, потому что сейчас это просто коричневый div.