EventListener函数错误:通过香草Javascript进行CSS操作

Question

我有一个错误，我的事件监听器不是函数。我已经搜索了以前的线程/文档，但未能找到我的特定问题的答案。目标是当用户在文本框中输入数字时，操纵边框左上角的半径。我对javascript很陌生，所以我可能没有正确使用它。

HTML:

<div id="topLeftBorder" > Top Left <br>
<input type="number" id="inputTL" value="0" min ="1" max="100"> 
</div>

Javascript：

var inputTL = document.getElementById('inputTL').value + 'px';
console.log(inputTL);

var borderPreview = document.getElementById('borderPreview');
var currentRadius = borderPreview.style.borderTopLeftRadius;
console.log(currentRadius);
inputTL.addEventListener('keyup', function() {
if (inputTL !== "0px") {
currentRadius = tLBorderChange;
}
});

我在console.log中收到了正确的值，但当函数运行时会返回错误。感谢您的帮助。谢谢

Answer 1

您需要

(1( 调用元素上的addEventListener，而不是字符串(在字符串上调用它不起作用(

(2( 要设置样式，必须显式指定给style对象；单独重新分配变量名(如currentRadius(不会有任何副作用：

var inputTL = document.getElementById('inputTL');
var borderPreview = document.getElementById('borderPreview');
inputTL.addEventListener('keyup', function() {
var tlValue = inputTL.value + 'px';
if (tlValue !== "0px") {
borderPreview.style.borderTopLeftRadius = tLBorderChange;
}
});

将px连接到一个字符串上只是为了将其与另一个带有px的字符串进行比较，这有点奇怪，请考虑：

var tlValue = inputTL.value;
if (tlValue !== "0") {