Как вызвать функцию в Javascript?

Question

Как вызвать функцию в Javascript?

Рейтинг: 0Ответов: 1Опубликовано: 04.02.2023

Буквально пару дней назад начал изучать JS и HTML. Сейчас разибраюсь с библиотекой Paper.js.

Проблема в кнопке, выделенной <p, которая отказывается вызывать функцию, т.е. кнопка просто не видит функцию draw_a_circle, написанную в теле , в консоли пишет "draw_a_circle is not defined".

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

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="paper-full.js" defer>
                paper.setup('myCanvas');
                class CircleGenerator {
                    constructor(x_coord, y_coord, radius, hex_circle, hex_border, border_size) {
                        this.x_coord=x_coord;
                        this.y_coord=y_coord;
                        this.radius=radius;
                        this.hex_circle=hex_circle;
                        this.hex_border=hex_border;
                        this.border_size=border_size;
                    }
                    draw_circle(x, y, r, hc, hb, bs) {
                        var newCircle = new Path.Circle(new Point(x, y), r);
                        myCircle.fillColor = {
                            hue: hc,
                            saturation: 1,
                            brightness: 1
                        }
                        myCircle.strokeColor = hb;
                        myCircle.strokeWidth = bs;
                    }
                }
            var new_circle = new CircleGenerator();

            function draw_a_circle() {
                new_circle.draw_circle(document.getElementById('x').value, document.getElementById('y').value, 
                document.getElementById('r').value, document.getElementById('hex_color').value, 
                document.getElementById('border_color').value, document.getElementById('border_size').value);
            }

            /*
                hue: Math.random() * 360,
            */
            
        </script>
    </head>
    <body>
        <h3>Рисуем круги</h3>
        <canvas id="myCanvas" width="600px" height="300px" style="border: 1px solid"></canvas>
        <br/>
        x: <input type="text" size=4 id="x">
        y: <input type="text" size=4 id="y"> 
        radius: <input type="text" size=4 id="r">
        &nbsp 
        <p>
            <button onclick="draw_a_circle()">
                Нарисовать круг
            </button>
        </p>
        
        &nbsp <button id="clear">Очистить холст</button>
        &nbsp <button id="clear">Сгенерировать</button>
        <br/>
        circle hex: <input type="text" size="8" id="hex_color">
        border hex: <input type="text" size="8" id="border_color">
        <br/>
        border size: <input type="text" size="3" id="border_size">

    </body>
</html>

javascript html библиотеки функции интерфейс

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

У тега script нельзя писать сразу и src и inline код.

При наличии атрибута src - содержимое тега будет проигнорировано.

Как вызвать функцию в Javascript?

Ответы