JavaScript функция не работает должным образом

Question

Я работаю с HTML, JavaScript и CSS. Цель функции - создать атрибут border-radius в элементе 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";
}

Сначала я выбрал оба элемента и назначил их этим двум переменным «поверхность» и «входы». «total» используется в структуре «for» в go через каждый элемент ввода и выбирает каждое значение, а затем преобразует его в Number в переменную «total».

Идея состоит в том, чтобы назначить границу -radius атрибутировать общее значение переменной, которое будет преобразовано в строку, чтобы его можно было распознать как значение.

Answer 1

1. Есть рамка
2. Исправить для l oop 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>

Answer 2

for(var x = 0; x == 3; x++)

, что l oop даже не выполняется, измените x == 3 на x <3 или что угодно, что вы хотите достичь. </p>

И я думаю, у вас должна быть граница, чтобы изменить ее радикально