CODEWITHSUNDEEP
javascripthtmlcss
Luansch
Luansch

Reputation: 3

JavaScript function not working as desired

I'm working with HTML, JavaScript and CSS. The function objective is to create a border-radius attribute in a div element(id="surface"), and assign the value typed in inputs texts(class="chars_1") to it.

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

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";
}

First I selected both elements and assigned it to these 2 variable "surface" and "inputs". "total" being used in the "for structure" to go through every input element and select every value, and afterward convert to Number to the "total" variable.

The idea is to assign to the border-radius attribute the total variable value, which will be converted to a string so it can be recognized as a value.

Upvotes: 0

Views: 76

Answers (2)

mplungjan
mplungjan

Reputation: 177940

  1. Have a border
  2. Fix the for loop for (var x = 0; x < inputs.length; x++) {

Here is an upgraded version

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>

Upvotes: 2

zywy
zywy

Reputation: 100

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

that loop doesn't even execute, change x==3 on x<3 or whatever you want to achive.

And I guess you must have border to change it's radious

Upvotes: 0

Related Questions