Как заставить кнопку реагировать на значение textarea. Javascript

Я пытаюсь заставить кнопку реагировать на значение текстовой области. btn представляет кнопку, txt представляет текстовое поле, а box — это элемент div, которым я хочу манипулировать.

let btn = document.getElementById("funbtn");
let txt = document.getElementById("funtxt");
let box = document.getElementById("funobject");

function answer() {
    if (txt.value === "rotate") {
        let rotate-deg = prompt("How many degrees do you wanna rotate?");
        box.setAttribute("style", "transition: 1000ms ease-in;";
        box.setAttribute("style", "transform: rotate("rotate-deg"deg);";

    }
}


btn.onclick = answer()
rotate-deg неверный синтаксис, используйте rotateDeg
Anurag Srivastava 22.05.2019 11:46

Исправьте опечатки: "transform: rotate("+rotate-deg+"deg);

user2417483 22.05.2019 11:53

@jeff Даже это неправильно с rotate-deg

Anurag Srivastava 22.05.2019 11:55

oooppps - исправление: измените rotate-deg на rotateDeg, затем измените: "transform: rotate("+rotateDeg+"deg);

user2417483 22.05.2019 15:54
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
4
74
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

У вас есть небольшие ошибки в вашем коде.

  1. rotate-deg не является допустимым синтаксисом для переменной в javascript.
  2. следует объединить стили в один .setAttribute-вызов или работать с .style-свойствами.
  3. Некоторые кавычки неверны при использовании javascript-переменных внутри стиля. Также кронштейн был закрыт неправильно.

Вот исправленная версия:

const btn = document.getElementById("funbtn");
const txt = document.getElementById("funtxt");
const box = document.getElementById("funobject");

function answer() {
  if (txt.value === "rotate") {
    let rotateAngle = prompt("How many degrees do you wanna rotate?");
    box.setAttribute("style", "transition: 1000ms ease-in; transform: rotate(" + rotateAngle + "deg);");
  }
}
btn.addEventListener("click", answer);
#funobject {
  width: 80px;
  height: 40px;
  margin-top: 40px;
  background-color: #f00;
}
<input tape="text" id="funtxt">
<button id="funbtn">Action</button>
<div id="funobject"></div>

Пробовал тестить, но вылезали те же ошибки. Он не распознает переменные... Когда я пишу те же самые строки в консоли, он работает...

Stefan Melchior 23.05.2019 12:28

это с jquery!

var btn= $("#funbtn");
var txt = $("#funtxt");
var obj = $("#funobject")
btn.on('click',function(){
const val = $.trim(txt.val());
if(val==="rotate"){
obj.css("transform","rotate(180deg)")
}
});
#funobject{
  width:100px;
  height:100px;
  background-color:red;
  transition: all 5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="funtxt">
  
</textarea>
<button id="funbtn">
submit
</button>
<div id="funobject">

</div>
Ответ принят как подходящий

Я узнал это!

Вместо того, чтобы добавлять прослушиватель событий на кнопку, по какой-то причине это должен был быть элемент div.

Другие вопросы по теме