求助：输入尺寸值后Color Box尺寸未更新，仅颜色可正常变更

嘿，我明白你的困扰——颜色能正常变更，但尺寸就是不跟着输入走，而且还没法实现“输入后立即改变”的效果对吧？咱们来一步步搞定它：

问题根源 #

你的代码里有两个关键问题：

• 只有颜色输入框绑定了change事件，高度和宽度输入框的变化完全没被监听，所以输入数值时根本不会触发尺寸修改的逻辑。
• change事件是在输入框失去焦点时才触发的，没法实现“输入后立即改变”的实时效果，得换成input事件才行。

修正后的代码 #

HTML（无需修改，保持原样即可） #

<div class="color-box"></div>
<input class="color-input" placeholder="Type a color here!" />
<br>
<input class="box-height" placeholder="Type Height Here!" />
<br>
<input placeholder="Tpye Width here!" class="box-width" />

CSS（无需修改） #

.color-box {
  background-color: limegreen;
  width: 100px;
  height: 100px;
}

JavaScript（核心修改部分） #

const heightBox = document.querySelector('.box-height');
const widthBox = document.querySelector('.box-width')
const input = document.querySelector('.color-input');
const colorBox = document.querySelector('.color-box');

// 定义统一的更新函数，把颜色和尺寸修改逻辑整合在一起
function updateBox() {
  colorBox.style.backgroundColor = input.value;
  // 增加空值判断，避免输入空值时出现无效的CSS单位
  colorBox.style.height = heightBox.value ? `${heightBox.value}px` : '100px';
  colorBox.style.width = widthBox.value ? `${widthBox.value}px` : '100px';
}

// 给三个输入框都绑定input事件，实现实时响应
input.addEventListener("input", updateBox);
heightBox.addEventListener("input", updateBox);
widthBox.addEventListener("input", updateBox);

关键修改说明 #

1. 抽离updateBox函数：把所有修改Color Box样式的逻辑集中到一个函数里，避免重复代码，也方便后续维护。
2. 替换change为input事件：input事件会在用户每一次输入（包括键盘打字、粘贴、删除内容）时立即触发，完美实现“输入即更新”的效果。
3. 给高度、宽度输入框绑定事件：现在不管修改哪个输入框的内容，都会触发Box样式的更新。
4. 增加空值判断：如果用户未输入高度/宽度，Box会默认回到初始的100px尺寸，避免出现undefinedpx这种无效的CSS值。

这样修改后，不管你输入颜色还是尺寸数值，Color Box都会实时响应变化啦！

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