时间戳

首页 > 解决方案 > JavaScript 函数无法按预期工作

javascript - JavaScript 函数无法按预期工作

问题描述

我正在使用 HTML、JavaScript 和 CSS。函数目标是在 div 元素（id="surface"）中创建一个边界半径属性，并将输入文本（class="chars_1"）中键入的值分配给它。

HTML

  <div id="container"> 
            <div class="input_wrapper" id="input_wrapper_tl">
                <input type="text" id="input_tl" class="chars_1" value="0" onkeypress="changeSize()">
            </div>
            <div class="input_wrapper" id="input_wrapper_tr">
                <input type="text" id="input_tr" class="chars_1" value="0" onkeypress="changeSize()">
            </div>
            <div class="input_wrapper" id="input_wrapper_br">
                <input type="text" id="input_br" class="chars_1" value="0" onkeypress="changeSize()">
            </div>
            <div class="input_wrapper" id="input_wrapper_bl">
                <input type="text" id="input_bl" class="chars_1" value="0" onkeypress="changeSize()">
            </div>
            <div id="surface">
                <textarea id="code" readonly="readonly"></textarea>
                <div id="options">
                    <input type="checkbox" checked="true" id="opt_webkit">
                    <label for="opt_webkit"> Webkit</label>
                    <input type="checkbox" checked="true" id="opt_gecko">
                    <label for="opt_gecko"> Gecko</label>
                    <input type="checkbox" checked="true" id="opt_css3">
                    <label for="opt_css3"> CSS3</label>
                </div>
            </div>

JavaScript 函数

function changeSize(){
  var surface = document.getElementById("surface");
  var inputs = document.getElementsByClassName("chars_1");  
  var total = 0;
    for(var x = 0; x == 3; x++){
    total += Number(inputs[x].value);
  }
  surface.style.borderRadius = String(total)+"px";
}

首先，我选择了这两个元素并将其分配给这两个变量“表面”和“输入”。在“for结构”中使用“total”来遍历每个输入元素并选择每个值，然后将数字转换为“total”变量。

想法是将总变量值分配给border-radius属性，该值将转换为字符串，以便可以将其识别为值。

标签： javascripthtmlcss

解决方案

  1. 有边界
  2. 修复 for 循环 for (var x = 0; x < inputs.length; x++) {

这里是升级版

const changeSize = (e) => {
  const tgt = e.target; // which input
  if (tgt.classList.contains("chars_1")) { // ah, one of those
    let total = [...document.querySelectorAll(".chars_1")].reduce(
      (sum, input) => { 
        const val = input.value;
        sum += val.trim() === "" || isNaN(val) ? 0 : +val; // only add if a number
        return sum;
      }, 0);
    console.log(String(total) + "px")
    document.getElementById("surface").style.borderRadius = String(total) + "px";
  }
};
window.addEventListener("load", () => { // when page loads
  document.getElementById("container").addEventListener("input", changeSize);
});
#surface {
  border: 3px solid black;
}
<div id="container">
  <div class="input_wrapper" id="input_wrapper_tl">
    <input type="text" id="input_tl" class="chars_1" value="0">
  </div>
  <div class="input_wrapper" id="input_wrapper_tr">
    <input type="text" id="input_tr" class="chars_1" value="0">
  </div>
  <div class="input_wrapper" id="input_wrapper_br">
    <input type="text" id="input_br" class="chars_1" value="0">
  </div>
  <div class="input_wrapper " id="input_wrapper_bl ">
    <input type="text" id="input_bl " class="chars_1" value="0">
  </div>
  <div id="surface">
    <textarea id="code" readonly="readonly"></textarea>
    <div id="options">
      <input type="checkbox" checked="true" id="opt_webkit">
      <label for="opt_webkit"> Webkit</label>
      <input type="checkbox" checked="true" id="opt_gecko">
      <label for="opt_gecko"> Gecko</label>
      <input type="checkbox" checked="true" id="opt_css3">
      <label for="opt_css3"> CSS3</label>
    </div>
  </div>

推荐阅读