Автор Тема: Рассчет ширины блока с javascript  (Прочитано 2310 раз)

29 Июнь, 2016, 11:09:34

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 51.0.2704.84 Chrome 51.0.2704.84
    • Просмотр профиля
Подскажите почему у меня неадекватно рассчитывается ширина блока при внесении значений в текстовое поле, вследвии чего у него некорректно меняется цвет? Цвет меняется если только первая цифра во внесенном числе равна 5 или больше. У меня же в условии написано что надо менять цвет если ширина менее 450 пикселей то цвет не менять, если ширина больше 450 и меньше 800 пикселей то сделать цвет оранжевым, если ширина больше 800 пикселей, то цвет сделать красным. Я вписываю к примеру число 200 а цвет при этом не становится красным, он вообще зеленый, как будто ширина меньше 450 пикселей но ведь ширина то изменилась, и значение ширины записано в переменную blockWidth2 исходя из значений которой должен устанавливаться цвет, так почему он косячно работает? ::)
Данный пример нормально работает если использовать инпут=range, но хотелось бы разобраться с текстовым инпутом, почему такие глюки с ним?
http://plnkr.co/edit/HwQ4ZzOaYlyyGhMi5HDF?p=preview
« Последнее редактирование: 29 Июнь, 2016, 11:12:47 от WebCyber »

Форум вебмастеров - Webmasters.BY

Рассчет ширины блока с javascript
« : 29 Июнь, 2016, 11:09:34 »

29 Июнь, 2016, 11:45:19
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4939
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 47.0 Firefox 47.0
    • Просмотр профиля
не совсем понятно зачем там некоторые переменные,
я бы сделал так
Код: Javascript
  1. <script type="text/javascript">
  2. var text = document.getElementsByTagName("input")[0];
  3. var block = document.getElementById("block");
  4. text.addEventListener("input", function(){
  5.     var textValue = text.value;
  6.      block.style.width = textValue + 'px';
  7.    if(textValue <= 450){
  8.       block.style.backgroundColor = "#6bf3c0";
  9.    }
  10.    else if(textValue >= 450 && textValue < 800){
  11.       block.style.backgroundColor = "orange";
  12.    }
  13.    else if(textValue >= 800){
  14.       block.style.backgroundColor = "red";
  15.    };
  16. });
  17. </script>

29 Июнь, 2016, 11:59:17
Ответ #2

Оффлайн WebCyber

  • Продвинутый юзер
  • ****
  • Сообщений: 306
  • Репутация: 1
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 51.0.2704.84 Chrome 51.0.2704.84
    • Просмотр профиля
Да, так работает) Спасибо) Но я пытаюсь понять как с помощью javascripta вычислять значения CSS которые на странице динамически меняются, Ваш пример работает, но немного по другому методу))
« Последнее редактирование: 29 Июнь, 2016, 12:01:37 от WebCyber »