Блог

Главная - Вопросы по программированию - Создание отдельных кнопок с различными стилями

Создание отдельных кнопок с различными стилями

#javascript #html #css #drupal

Вопрос:

Я пытаюсь сделать две разные кнопки для разных модулей. У меня есть аккордеон, который использует кнопку, чтобы развернуть/свернуть его, и у меня есть еще одна кнопка, которую вы нажимаете, чтобы сложить кучу чисел. Проблема в том, что, хотя я назвал кнопку для добавления чисел отдельным именем, стиль кнопки из аккордеона переносится. Вот что я использую для кнопки сложения чисел. «`

 lt;style media="screen"gt; .addbutton {  padding: 1 px;  height: 40 px;  width: 10 px; }  fieldset {  margin-bottom: 20 px;  display: inline-block; }  lt;/stylegt;  lt;bodygt; lt;hgt;Input Scores for Each Criterion:lt;brgt;lt;/hgt;  lt;fieldsetgt;  1:  lt;select class="select"gt;  lt;option value="1"gt;1lt;/optiongt;  lt;option value="2"gt;2lt;/optiongt;  lt;option value="3"gt;3lt;/optiongt;  lt;/selectgt;  lt;brgt;  2:   lt;select class="select"gt;  lt;option value="1"gt;1lt;/optiongt;  lt;option value="2"gt;2lt;/optiongt;  lt;option value="3"gt;3lt;/optiongt;  lt;/selectgt;  lt;brgt;  3:   lt;select class="select"gt;  lt;option value="1"gt;1lt;/optiongt;  lt;option value="2"gt;2lt;/optiongt;  lt;option value="3"gt;3lt;/optiongt;  lt;/selectgt;  lt;brgt;  4:   lt;select class="select"gt;  lt;option value="1"gt;1lt;/optiongt;  lt;option value="2"gt;2lt;/optiongt;  lt;option value="3"gt;3lt;/optiongt;  lt;/selectgt;   lt;brgt;  lt;button type = "addbutton" id="btnInsert" onclick="onClick()"gt;Add score!lt;/buttongt; lt;/fieldsetgt; lt;brgt; lt;brgt; lt;fieldsetgt;  Score:  lt;div id="lsOutput"gt;  lt;/divgt; lt;/fieldsetgt; lt;/bodygt;  lt;scriptgt;  let selectArray = document.querySelectorAll('.select');  let number = 0;  const inpKey = document.getElementById("inpKey");  const inpValue = document.getElementById("inpValue");  const btnInsert = document.getElementById("btnInsert");  const lsOutput = document.getElementById("lsOutput");  localStorage.setItem("total",number);  localStorage.removeItem("total",number)  function onClick () {  lsOutput.innerHTML = ''  number = 0;  for (let i = 0; i lt; selectArray.length;i  ){  number = parseInt(selectArray[i].value);  }   localStorage.setItem("total",number);  lsOutput.innerHTML  = number;  };  lt;/scriptgt;

Когда я запускаю его самостоятельно, я получаю следующее: https://i.imgur.com/dNrSALr.png
Но когда я добавляю его на веб-сайт (пользовательский блок Drupal) Я понимаю это: https://i.imgur.com/pSbQ8BL.png

В стиле аккордеона он назван в честь «кнопки», но даже если я изменю название, стиль все равно будет перенесен на кнопку добавления.

 button {  cursor: pointer;  height: 53px;  width: 500px; } button:after {  content: '02B';  color: #777;  font-weight: bold;  float: right;  margin-left: 5px; }

Большое спасибо.

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

1. прежде всего, вы обращаетесь .addButton к классу в своем CSS, но в dom имя класса не указано (вы путаете его с типом). Во-вторых, очень сложно воспроизвести ваш код, учитывая, что у вас есть 2 файла стилей с разными элементами, которых не существует. Я предлагаю вам отредактировать свой вопрос, чтобы получить правильный ответ.

2. @серьезно, я не совсем понимаю, что ты имеешь в виду. Причина, по которой у меня есть 2 файла стилей, заключается в том, что они являются отдельными модулями в Drupal, конструкторе веб-сайтов. Может быть, мне следует вместо этого иметь 1? И что такое «дом»? Спасибо.

3. DOM означает исходный документ, инициализированный вашим HTML. и наличие 2 файлов стилей не является проблемой, если вы правильно вызываете их в свой dom. но главная проблема заключается в неправильном вызове ваших элементов в CSS. Если вы определяете свой элемент с именем класса, назовите его именем класса, например, addButton вызывается как класс в CSS, но в вашем HTML это тип, поэтому он не будет работать. измените type на class в html. ты понимаешь, что я имею в виду?

4. @серьезно Хорошо, я думаю, что мне придется пересмотреть CSS. Спасибо.

Метки: