Отображать окно на странице HTML, используя внешний Javascript?

0

Когда кнопка "Отправить" нажата на HTML-странице, поле также должно отображаться в любом месте страницы любого цвета. Для этого я использую внешнюю страницу JavaScript. Тем не менее, он не работает... Я попытался отладить его, и он не пройдет мимо точки var body = document.getElementsById("body")[0];

Вот код HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exercise 2 - Question 2</title>
        <script src="E02_Q2.js"></script>
    </head>

    <body>
        <form> 
            <input type="submit" value="Add Box" onclick="ShowBox()"/>
        </form>
    </body>

</html>

Вот внешний Javascript для сопровождения:

function ShowBox(){
    //get the body element of the document
    var body = document.getElementsById("body")[0];

    //create the canvas tag
    var canvas = document.createElement("canvas");
    canvas.height = 200;
    canvas.width = 200;
    var context = canvas.getContext("2d");

    //create the box and append onto the canvas 
    canvas.fillStyle = "#FF0000";
    canvas.fillRect(50,50,100,100); 

    //append the canvas onto the body 
    body.appendChild(canvas);
}

Не совсем уверен, где я иду не так здесь...

Теги:
html5-canvas

2 ответа

2

Во-первых, в приведенной ниже строке есть ошибка. (У вас нет элемента с id как body и даже если бы существовал элемент с id='body' метод не getElementsById, он должен быть getElementById.)

var body = document.getElementsById("body")[0];

Вместо этого он должен выглядеть следующим образом: getElementsByTagName

var body = document.getElementsByTagName("body")[0];

Во-вторых, fillStyle и fillRect должны быть в context а не в canvas.

context.fillStyle = "#FF0000";
context.fillRect(50,50,100,100);

В-третьих, вы должны return false; для предотвращения действия по умолчанию кнопки submit, как показано ниже:

<input type="submit" value="Add Box" onclick="ShowBox();return false;"/>

скрипка

Поделиться
  • 1
    +1. Можно также использовать document.body
1

Измените кнопку формы на обычную кнопку. В противном случае добавьте return false в функцию.

<form> 
        <input type="button" value="Add Box" onclick="ShowBox()"/>
</form>

В функции больше ошибок., Пожалуйста, проверьте сценарий ниже.

Например: http://jsfiddle.net/3EwxB/

function ShowBox(){

     var body = document.getElementsByTagName("body")[0];

    //create the canvas tag
    var canvas = document.createElement("canvas");
    canvas.height = 200;
    canvas.width = 200;
    var context = canvas.getContext("2d");

    //create the box and append onto the canvas 
    context.fillStyle = "#FF0000";
    context.fillRect(50,50,100,100); 

    //append the canvas onto the body 
    body.appendChild(canvas);

}
Поделиться
  • 0
    К сожалению, это все еще не работает ... Я не знаю почему ...
  • 0
    ты проверил мою ссылку jsfiddle. какой браузер вы тестируете. Я тестировал в хроме.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню