I need help with this.

I have 3 inputs, one type=range and the other two type=text.

I have managed that the three inputs are related. That is, if i change one input, the other inputs change too. In this part, the code works fine

My problem is that i want to return a variable that equals to 0 or 1 deppending of the element changed.

Let me explain, if the user move the cursor of the type range, or type in the first input, elmChanged return 1. But, in the other case, if the user type in the second input, elmChanged return 0

I have tried using onchange, and onkeyup, but, i couldn't find a solution, because, if i change the value of one input, the other two inputs change too. I have tried using also onkeyup, but i neither couldn't find a solution because i couldn't manage how to change the value of elmChanged.

My question is how can i do this and where to load elmChanged depending of the last element changed.

var elmChanged = ""

    function RangeChanged(){
        amountInput.value=amountRange.value; 
        amountInput_2.value=amountRange.value * 2
        // how can i do that
        elmChanged = 1
    }

    function FirstInputChanged(){
        amountRange.value=amountInput.value; 
        amountInput_2.value=amountInput.value * 2;
        // how can i do that
        elmChanged = 1
    }

    function SecondInputChanged(){
        amountRange.value=amountInput_2.value; 
        amountInput.value=amountInput_2.value / 2;
        // how can i do that
        elmChanged = 0
    }

console.log(elmChanged)
ElementInputChanged.value = elmChanged 

<form>
  <input type="range" name="amountRange" id="amountRange" min="0" max="100" value="50" step="1" oninput="RangeChanged()"  />
  <input type="text" name="amountInput" id="amountInput" min="0" max="100" value="50" oninput="FirstInputChanged()"  />
  <input type="text" name="amountInput_2" id="amountInput_2" min="0" max="200" value="100" oninput="SecondInputChanged()" />
        
  <span>Element Changed:</span> <span id="ElementInputChanged"></span>

</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can pass it to a function. By the way: span doesn't have value like inputs. I changed it to textContent.

Snippet:

/*var elmChanged = ""*/

function RangeChanged(){
  amountInput.value=amountRange.value; 
  amountInput_2.value=amountRange.value * 2
  // how can i do that
  elmChanged(1);
}

function FirstInputChanged(){
  amountRange.value=amountInput.value; 
  amountInput_2.value=amountInput.value * 2;
  // how can i do that
  elmChanged(1);
}

function SecondInputChanged(){
  amountRange.value=amountInput_2.value; 
  amountInput.value=amountInput_2.value / 2;
  // how can i do that
  elmChanged(0);
}
function elmChanged(num) {
  console.log(num)
  ElementInputChanged.textContent = num
}

<form>
  <input type="range" name="amountRange" id="amountRange" min="0" max="100" value="50" step="1" oninput="RangeChanged()"  />
  <input type="text" name="amountInput" id="amountInput" min="0" max="100" value="50" oninput="FirstInputChanged()"  />
  <input type="text" name="amountInput_2" id="amountInput_2" min="0" max="200" value="100" oninput="SecondInputChanged()" />
        
  <span>Element Changed:</span> <span id="ElementInputChanged"></span>

</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>