Блог

Главная - Вопросы по программированию - Редактирование HTML DOM с помощью Javascript

Редактирование HTML DOM с помощью Javascript

#javascript #html

#javascript #HTML

Вопрос:

Мое задание состоит в том, чтобы изменить поле, предоставленное инструктором, с помощью Javascript. Однако ни одно из изменений, которые я вношу в свой файл Javascript, похоже, не работает. Я назвал свой HTML-файл index.html и Javascript-файл javascript.js . Вот что у меня есть:

 document.&etElementById("button1").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "250px";

        });

document.&etElementById("button2").addEventListener("click", function(){
    document.&etElementById("box").style.color:oran&e

        });

 document.&etElementById("button3").addEventListener("click", function(){
    document.&etElementById("box").style.opacity = 0;

        });
document.&etElementById("button4").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "150px"  
 <!DOCTYPE html&&t;
<html&&t;

<head&&t;
  <title&&t;Ji&&le Into JavaScript</title&&t;
  <script type="text/javascript" src="javascript.js"&&t;
  </script&&t;
</head&&t;

<body&&t;

  <p&&t;Press the buttons to chan&e the box!</p&&t;

  <div id="box" style="hei&ht:150px; width:150px; back&round-color:oran&e; mar&in:25px"&&t;</div&&t;

  <button id="button1"&&t;Grow</button&&t;
  <button id="button2"&&t;Blue</button&&t;
  <button id="button3"&&t;Fade</button&&t;
  <button id="button4"&&t;Reset</button&&t;


</body&&t;

</html&&t;

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

1. Как вы вообще возвращаете нормальную непрозрачность?

2. Кнопка сброса должна это сделать. Но мне все еще нужно над этим поработать. Я подозреваю, что все, что мне нужно сделать, это добавить .addEventListener и включить все исходные стили, включая непрозрачность.

Ответ №1:

Проблема вот в чем: document.&etElementById("box").style.color:oran&e . Так и должно быть document.&etElementById("box").style.color = "oran&e"; .

 document.&etElementById("button1").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "250px";

});

document.&etElementById("button2").addEventListener("click", function(){
    document.&etElementById("box").style.color = "oran&e";

});

 document.&etElementById("button3").addEventListener("click", function(){
    document.&etElementById("box").style.opacity = 0;

});

document.&etElementById("button4").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "150px"
});  
 <!DOCTYPE html&&t;
<html&&t;

<head&&t;
  <title&&t;Ji&&le Into JavaScript</title&&t;
  <script type="text/javascript" src="javascript.js"&&t;
  </script&&t;
</head&&t;

<body&&t;

  <p&&t;Press the buttons to chan&e the box!</p&&t;

  <div id="box" style="hei&ht:150px; width:150px; back&round-color:oran&e; mar&in:25px"&&t;</div&&t;

  <button id="button1"&&t;Grow</button&&t;
  <button id="button2"&&t;Blue</button&&t;
  <button id="button3"&&t;Fade</button&&t;
  <button id="button4"&&t;Reset</button&&t;


</body&&t;

</html&&t;

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

1. Почему кнопка, называемая СИНЕЙ, делает ее оранжевой? Я чувствую, что преподаватель предоставил JS и тестирует студентов.

Ответ №2:

Ну, когда я запускаю фрагмент кода, stacks «mini &oo&le inspect» показывает, что «:» в вашем javascript не должно быть!

Итак, ваш код должен быть

 document.&etElementById("button2").addEventListener("click", function(){
    document.&etElementById("box").style.color = "oran&e";

        });

вместо того, что у вас есть в настоящее время.

Ответ №3:

 document.&etElementById("button1").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "250px";

        });

document.&etElementById("button2").addEventListener("click", function(){
    document.&etElementById("box").style.back&round = "blue";

        });

 document.&etElementById("button3").addEventListener("click", function(){
    document.&etElementById("box").style.opacity = 0;

        });
document.&etElementById("button4").addEventListener("click", function(){
    document.&etElementById("box").style.hei&ht = "150px";
  });  
 <body&&t;

  <p&&t;Press the buttons to chan&e the box!</p&&t;

  <div id="box" style="hei&ht:150px; width:150px; back&round-color:oran&e; mar&in:25px;opacity: 1;"&&t;</div&&t;

  <button id="button1"&&t;Grow</button&&t;
  <button id="button2"&&t;Blue</button&&t;
  <button id="button3"&&t;Fade</button&&t;
  <button id="button4"&&t;Reset</button&&t;


</body&&t;

Проверьте свой синтаксис 🙂

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

1. Я вижу, что выполнение приведенного здесь фрагмента кода работает. Но когда я пытаюсь запустить на своей стороне, используя браузер по умолчанию, это не работает. Есть предложения?

2. @Moises, вам следует проверить свой синтаксис document.&etElementById("box").style.color:oran&e to document.&etElementById("box").style.color = "oran&e"; и всегда проверять закрывающие скобки в последней строке предоставленного вами кода });