Jamisco Jamisco - 14 days ago 5
HTML Question

Make Javascript instantly/immediately be interchangeable depending on user input

In a js code, i created 3 buttons --- button 1...button 2...button 3
and 3 input fields --- input field 1...input field 2...input field 3

From the beginning of the script all buttons are disabled

button 1 will only be activated (you can click on it) when input field 1 and 2 have numerated values

button 2 will only be activated when input field 1 and 3 have numerated values

button 3 will only be activated when input field 2 and 3 have numerated values.

My problem is when i entered a numerated value for input field 1 and 2, button 1 will not activate (in-clickable) even though it was suppose to

And lets say i redid my code and got my whole code backwards so, at the beginning of my script all the buttons were not disabled (you could click on them). Then i made a simple conditional statement like so

input field 1 = if1

input field 2 - if2




if (if1.length = 0 || isNaN(if1) && if2.length = 0 || isNaN(if2) ) {
document.getElementById("button 1").disable = true;
}


Button 1 will not immediately disable until the user clicks on the button. And if the user were to re-enter the appropriate value type in input field 1, button 1 will not activate (be-clickable) because apparently its permanently disabled.

So down to summary, I'm asking if there is a way to make JavaScript be instantly interactive. Such as a web browser search bar. The moment you type something, you immediately get a list of possible questions and when you don't type anything in them the list disappears and the browser regains its original state.

Any Advice/help shall be greatly appreciated

Due to Life and its problems my code some how got deleted. Thus the lack of code and bunch of words. Sorry.

Answer

var field1 = document.getElementById('if1');
var field2 = document.getElementById('if2');
var field3 = document.getElementById('if3');

var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');
var button3 = document.getElementById('button3');


field1.addEventListener('input', function(){
    if(this.value!= '' && field2.value!='')
        button1.disabled = false;
    else
        button1.disabled = true;
  
    if(this.value!= '' && field3.value!='')
        button2.disabled = false;
    else
        button2.disabled = true;
});


field2.addEventListener('input', function(){
    if(this.value!= '' && field1.value!='')
        button1.disabled = false;
    else
        button1.disabled = true;
  
    if(this.value!= '' && field3.value!='')
        button3.disabled = false;
    else
        button3.disabled = true;
  
});


field3.addEventListener('input', function(){
    if(this.value!= '' && field1.value!='')
        button2.disabled = false;
    else
        button2.disabled = true;
  
    if(this.value!= '' && field2.value!='')
        button3.disabled = false;
    else
        button3.disabled = true;
  
});
<input type="text" id="if1">
<input type="text" id="if2">
<input type="text" id="if3">
<br>
<button type="button" id="button1" disabled="true">Button1</button>
<button type="button" id="button2" disabled="true">Button2</button>
<button type="button" id="button3" disabled="true">Button3</button>