petr69
@petr69
Начинающий

В чем ошибся,не работает скрипт?

Доброго времени суток.
Ребята,изучаю JS по книге,изучив половину дошел до теории,здесь нужно создать скрипт,который будет по нажатию кнопки создавать разноцветные кубики.
Скрипт написал,не работает,второй день пытаюсь понять где ошибся. Подскажите пожалуйста в чем я ошибся,что не так написал...
Скрипт из книги:
1.jpg
2.jpg
3.jpg
4.jpg

Мой код

<html>
<html lang="ru">
<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">
    <title>Большая игра</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="mainbutton" onclick=createShape() >Создать фигуру</button>
</body>
</html>


<script>
    function createShape() {
        shapeCount=shapeCount+1;
    }
    function createShape(){
        var shapeCount=shapeCount+1;
        var size=Math.floor((Math.random()*100)+5);
        var randomColor=colors[Math.floor(Math.random()*colors.length)];
    
    }  
        var shapeID = 'shape'+shapeCount;  
        $('body').append("<div id='"+shapeID+"'></div>");
        $('#'+shapeID).css("with",size+"px");
        $('#'+shapeID).css("min-heigh",size+"px");
        $('#'+shapeID).css("background-color",randomColor);
        $('#'+shapeID).draggable();
    
</script>


Благодарю вас за конструктивные комментарии.
  • Вопрос задан
  • 141 просмотр
Решения вопроса 1
@QuayS1de
Переписал под свой лад. Я так понимаю вы этого эффекта хотели?

<button id="mainbutton">Создать фигуру</button>

<script>
        let colors = ['red', 'green', 'blue'];

        $(document).on('click', '#mainbutton', function(){
            let div = document.createElement('div')
            
            let size = Math.floor((Math.random()*100)+5);
            let randomColor = colors[Math.floor(Math.random()*colors.length)]

            $(div).css("width", size+"px")
            $(div).css("height", size+"px")
            $(div).css('backgroundColor', randomColor)
            document.body.append(div)
        });


        
    </script>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
v3shin
@v3shin
Веб-шаман
Удалите первую функцию createShape(). Кусок кода
var shapeID...
...
$('#'+shapeID).draggable();

запихните в функцию createShape().
Пы.Сы: И да, почитайте learn.javascript.ru: это будет полезнее бумажных книг для начинающих.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы