Jamisco Jamisco - 1 year ago 39
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 Source

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>