为何无法获取输入框value值？如何通过输入值修改div圆角？

你的JS代码存在这几个关键问题： #

• 变量命名踩坑：用了value作为DOM元素变量名，value是JS里的特殊标识符，容易引发命名冲突，建议改用更语义化的名字，比如radiusInput。
• 样式变量赋值错误：你把container.style.borderRadius赋值给border变量，这只是存了初始的圆角值（初始为空），后续修改border变量只是改了一个字符串，根本不会影响元素的实际样式。应该直接操作元素的style属性。
• 提前计算了pixelVal：页面刚加载时输入框是空的，你就把value.value+"px"赋值给pixelVal，这个值不会随输入框内容更新，必须把这个计算逻辑放到点击事件内部，每次点击时获取最新的输入值。
• 点击事件里的错误：border=value+"px"这里，value是DOM元素对象，不是输入框的value属性值，而且就算拿到值，也没作用到元素样式上。

修正后的完整代码： #

HTML（无需修改）

<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>

JS

let btn = document.getElementById('submit');
// 更换变量名避免命名冲突
let radiusInput = document.getElementById('value');
// 存储容器元素，方便后续直接操作样式
let container = document.getElementById("container");

btn.addEventListener('click', function(){
    // 每次点击时获取输入框的最新值
    let inputVal = radiusInput.value;
    // 简单判断输入有效性，避免空值或非数字导致样式异常
    if(inputVal && !isNaN(inputVal)){
        container.style.borderRadius = inputVal + "px";
        console.log(inputVal + "px");
    } else {
        console.log("请输入有效的数字");
    }
})

修改后，每次点击提交按钮都会获取输入框的最新值，将其转为带px单位的样式值并设置给容器的圆角属性，同时加入了输入有效性判断，避免无效值影响样式。

内容的提问来源于stack exchange，提问作者asnshif