Установка FontSize текстового поля с помощью RadioButtons

Question

Установка FontSize текстового поля с помощью RadioButtons

0

Javascript: function makeStyle (x) {

          var x = document.getElementById("styleText");

          if(document.getElementById("xx-small").checked)
          {       
              x.style.fontSize = "xx-small";
          }
          else if(document.getElementById("medium").checked)
          {   
              x.style.fontSize = "medium";
          }
          else if(document.getElementById("xx-large").checked)
          {
              x.style.fontSize = "xx-large";
          }

      }
      document.getElementById('styleText').addEventListener('change', makeStyle);

HTML:

6. Настройте текстовые данные, как указано на выбранном переключателе.

<label>xx-small</label><input type="radio" id="xx-small" name="rb" value="xx-small"  /><br/>
<label>medium</label><input type="radio" id="medium" name="rb" value="medium" /><br/>
<label>xx-large</label><input type="radio" id="xx-large" name="rb" value="xx-large" /><br/>   
<input type="text" id="styleText" value = "Random Text " />

Мой вопрос в том, что.. Кажется, я не могу заставить радиатор работать правильно, изменив шрифт в текстовом поле. Итак, как я смогу решить эту проблему?

Я уверен, что я сделал что-то не так, но я не могу видеть, что я сделал ошибку.

user3121084 17 апр. 2014, в 22:07

Источник

Теги:

javascript

html

2 ответа

Ещё вопросы

one stevy boi · Answer 1 · 2014-04-17T18-04-00.000Z

вы установили прослушиватель для #styleText который, как представляется, не является радиообъектом. вы должны подключить тот же самый прослушиватель ко всем 3 идентификаторам переключателя. Кроме того, внутри вашего обработчика вы читаете значения из одного и того же элемента независимо от того, что было изменено var x = document.getElementById("styleText");

В общем, я должен добавить еще 3 этого документа.getElementById ('styleText'). AddEventListener ('change', makeStyle); ? Просто заменить styleText на id переключателей?
Есть несколько других проблем, проверьте мои правки

Shoaib Raza · Answer 2 · 2014-04-17T17-29-00.000Z

Вы должны удалить прослушиватель событий для <input type="text" id="styleText" value = "Random Text "/> и добавить три прослушивателя событий для радиокнопок в вашем javascript-коде:

Javascript://Добавить следующий код в событие window.onload

window.onload=function()
  {
    document.getElementById('xx-small').addEventListener('change', makeStyle);
    document.getElementById('xx-large').addEventListener('change', makeStyle);
    document.getElementById('medium').addEventListener('change', makeStyle);
  };

Вот демо-версия JS Fiddle.

Спасибо, но когда я попытался скопировать его и заменить мой старый код .. Это не сработало бы. Я сделал что-то не так?
Вы, должно быть, делаете какую-то ошибку, так как в демоверсии она работает идеально.
Ну, мне нужно сделать что-то кроме удаления слушателя событий для styleText?
Нет, вам просто нужно удалить прослушиватель событий для styleText и добавить три прослушивателя для переключателя, или вы можете просто скопировать и вставить весь HTML и Javascript из демонстрации JS Fiddle.
Попробовал это, и я использовал Firebug для отладки, и я получил эту ошибку: TypeError: document.getElementById (...) является нулевым document.getElementById ('xx-small'). AddEventListener ('change', makeStyle);
Я отредактировал фрагмент кода выше, добавил слушателей в событие window.onload, ошибка была вызвана тем, что перед загрузкой переключателя браузер находит его и выдает ошибку.