Блог

Главная - Вопросы по программированию - Почему я не могу установить id в javascript так, как я могу установить className?

Почему я не могу установить id в javascript так, как я могу установить className?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я погуглил, но не смог получить удовлетворительного ответа. Я новичок в JS.

Что я делаю, так это создаю кнопку с написанным на ней номером, и всякий раз, когда пользователь нажимает на кнопку, число увеличивается на единицу.

 var newButton = document.createElement('Button');
newButton.id = "btn";
newButton.innerHTML = "0";
newButton.addEventListener("click", () => {
  newButton.innerHTML = String(Number(newButton.innerHTML)   1);
});
document.body.appendChild(newButton);  
 #btn {
  width: 96px;
  height: 48px;
  font-size: 24px;
}  
 <!DOCTYPE html>
<html>

<head>
  <!--Where the CSS is loaded in-->
  <!--<link rel="stylesheet" href="css/button.css" type="text/css">-->
</head>

<body>
  <!--Where the JS is loaded in-->
  <!--<script src="js/button.js" type="text/javascript"></script>-->
</body>

</html>

Теперь это действительно отображает кнопку и увеличивает номер на ней, но css не отражается на отображаемой кнопке.
Вместо этого, если мой button.js похоже на это

     var newButton = document.createElement('Button');
    newButton.id = "btn";
    newButton.className = "BtnClass";
    newButton.innerHTML = "0";
    newButton.addEventListener("click", ()=>{
       newButton.innerHTML = String(Number(newButton.innerHTML)   1);
   });
    document.body.appendChild(newButton);

И button.css стилизует его по классу, а не по идентификатору,

 .BtnClass{  width: 96px;
    height: 48px;
    font-size: 24px;}

Тогда кнопка будет правильно отображаться так, как я хочу.

Почему этого не происходит, когда я создаю стиль с использованием id name, но отлично работает, когда я создаю стиль с использованием class name?

Обновление — Работает нормально, вероятно, это была какая-то настройка, специфичная для сайта кодирования, который я использовал.

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

1. CSS в вашем первом примере, похоже, работает нормально.

2. Для меня все в порядке: codesandbox.io/s/hungry-stonebraker-4zbz7?file=/src/index.js

3. @Ivar Хорошо, теперь, когда я запускаю здесь, это действительно работает нормально. В HackerEarth не все работало нормально. Должна быть какая-то конкретная настройка в HackerEarth, верно?

4. @godwa_rao Я не знаю HackerEarth, поэтому не могу сказать. Все, что я могу сказать, что это должно быть для примера, который вы предоставили.

5. @Ivar хорошо, спасибо.