Я пытаюсь заставить кнопку реагировать на значение текстовой области. 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()
Исправьте опечатки: "transform: rotate("+rotate-deg+"deg);
@jeff Даже это неправильно с rotate-deg
oooppps - исправление: измените rotate-deg на rotateDeg, затем измените: "transform: rotate("+rotateDeg+"deg);
У вас есть небольшие ошибки в вашем коде.
rotate-deg
не является допустимым синтаксисом для переменной в javascript..setAttribute
-вызов или работать с .style
-свойствами.Вот исправленная версия:
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>
Пробовал тестить, но вылезали те же ошибки. Он не распознает переменные... Когда я пишу те же самые строки в консоли, он работает...
это с 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.
rotate-deg
неверный синтаксис, используйтеrotateDeg