Question

我正在尝试使按钮对textarea的值做出反应。 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

您的代码中有一些小错误。

rotate-deg不是javascript中变量的有效语法。
您应将样式合并为一个.setAttribute调用，或使用.style属性。
在样式中使用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>

Answer 2

使用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 3

我发现了！

出于某种原因，它必须是div元素，而不是在按钮上添加事件监听器。

如何使按钮对文本区域的值作出反应。 Javascipt

3 个答案: