Как заставить кнопку реагировать на значение 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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.

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