如何获取var number变量的值并将其设置为元素高度？

首先，你的代码里有几个需要调整的地方，我帮你拆解并修正：

原代码的问题点 #

• 变量名拼写不一致：你定义了var color = document.getElementById("graf1");，但后面调用的时候写成了farge.style.height——这里明显是拼写失误（看起来farge是挪威语的“颜色”，但变量名得保持统一哦）
• 获取输入值的时机不对：你在页面加载时就获取了number的值，但用户点击按钮时，输入框里的内容可能已经修改了，这时候用的还是页面加载时的旧值，达不到实时获取的效果
• 缺少无效输入处理：如果用户输入的不是数字，+document.getElementById("tall1").value会得到NaN，设置高度时会失效

修正后的代码 #

// 绑定点击事件
document.getElementById("knapp").onclick = doSomething;

function doSomething() {
  // 点击按钮时，实时获取输入框的当前值并转为数字
  const inputValue = document.getElementById("tall1").value;
  let number = Number(inputValue);

  // 处理无效输入：如果不是数字或者小于等于0，设置默认高度
  if (isNaN(number) || number <= 0) {
    number = 100; // 你可以改成自己想要的默认值
    // 也可以添加提示：alert("请输入有效的正数字哦");
  }

  // 获取目标元素，注意变量名统一
  const targetElement = document.getElementById("graf1");
  // 将数字转为字符串并拼接px单位，设置高度
  targetElement.style.height = `${number}px`;
}

关键说明 #

• 实时获取输入值：把获取输入框值的逻辑放到doSomething函数内部，这样每次点击按钮都会拿到用户最新输入的内容
• 字符串拼接的两种方式：除了模板字符串${number}px，你也可以用传统的number + "px"，两种写法效果一致，模板字符串可读性更好
• 无效输入防护：通过isNaN判断输入是否为有效数字，避免出现无效的高度值导致页面异常

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