Это мой первый вопрос, на который я пытаюсь ответить - это довольно большое дело. Во всяком случае ...
Несколько вещей, которые я заметил:
Я немного запутался, читая код, видя, что переменная question так часто используется для различных частей код. Поэтому я изменил var question на var imageBlock, чтобы сделать его более читабельным для меня.
Вы выполняли функцию areaquestion1() onload. Поскольку функция check() выполнялась как часть функции areaquestion1(), она также выполнялась, по очереди отображая «Неверно» даже до ввода ответа. Я изменил это значение на document.getElementById("solve").check();, чтобы оно работало только после ПРОВЕРКИ! кнопка была нажата.
Наконец-то дойдем до вашего актуального вопроса. Похоже, вы пытаетесь использовать document.createElement для создания изображения с id из question, однако на основе вундеркиндов для гиков и W3 Schools вы используете document.createElement для создания элемента img. ТОГДА вы можете установить атрибут id на то, что вам нравится. В этом случае я переключил его на imageBlock.setAttribute("id", "madeUpImg");, чтобы улучшить читаемость.
Так вот, что я и сделал, я думаю, что вы можете сделать много улучшений, но это работает, и это даст вам хороший старт:
function areaquestion1() {
var imageBlock = document.createElement("IMG");
imageBlock.setAttribute("id", "madeUpImg");
imageBlock.setAttribute("src", "guWFE.png");
imageBlock.setAttribute("width", "304");
imageBlock.setAttribute("height", "228");
imageBlock.setAttribute("alt", "2*1");
document.body.appendChild(imageBlock); // this appends it to the bottom of the page
number1 = 2
number2 = 1
calcanswer = (number1*number2);
var question = document.getElementById("question");
question.innerHTML = "What is the area of this lego brick?";
document.getElementById("solve").check();
// areaquestion2(); }
Все это отредактировано, чтобы ответить на ваши дальнейшие вопросы:
Чтобы добавить его в соответствующее место: у меня не было времени вернуться в свой код, но это то, что Я думаю. В настоящее время, когда вы читаете свой код, у вас есть document.body.appendChild(question); Этот JavaScript говорит компьютеру найти документ, затем найти тело этого документа и запустить функцию appendChild. Итак, в основном это говорит - «компьютер, добавь переменную вопроса в тело документа». Итак, что с этим не так? Ну, вы хотите добавить его к указанному c div! Итак, вы очень близки, но вы не захватываете question div! Вам нужно использовать код, чтобы сообщить компьютеру, что нужно найти вопрос div, а затем добавить изображение к этому div. Я бы сделал что-то вроде этого: document.getElementById('question').appendChild(imageBlock) теперь это означает, что код захватывает div, к которому вы хотите добавить его, добавляя imageBlock к этому div.
Я прокомментировал это areaquestion2, потому что я знаю, что вы столкнетесь с большим количеством проблем. 1. Если вы вызовете areaquestion2 в функции areaquestion1, она запустится сразу после загрузки сайта (вы вызываете область question1 при загрузке). Я думаю, что это заставит оба изображения появляться одновременно. Почему? Он просто получает указание добавить другое изображение к вопросу div. 2. Возможно, вы не хотите, чтобы оба изображения появлялись одновременно. Итак, вам нужно будет найти способ заменить первое изображение, а не пытаться добавить другое.
Вот и все, чем я могу вам сейчас помочь. Я думаю, что если вы продолжите работать над этим, а затем проведете рефакторинг, вы многому научитесь. Я думаю, что вы должны попытаться свести это к одной функции, назначив вопросы переменным, а затем передав эти переменные в качестве аргументов вашей функции. Если вы еще этого не сделали, я бы настоятельно рекомендовал пройти урок FreeCodeCamp по урокам.
Надеюсь, это помогло !!