Как заставить кнопку реагировать на значение текстовой области. Javascipt

Question

Я пытаюсь заставить кнопку реагировать на значение текстовой области.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()

Answer 1

это с 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>

Answer 2

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

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>