How to modify "oninput" with button?

Question

What is the best way to add oninput = "insertScriptHere,insertScript2Here" to a data table, if the table already has oninput = "insertScriptHere already? I only want the second script to join onto the oninput after a button press.

To reiterate: I have <input type="number" placeholder="-" size="2" maxlength="3" id="s1g1" oninput="constraint(this)"> and I want it to change to <input type="number" placeholder="-" size="2" maxlength="3" id="s1g1" oninput="constraint(this),autoEnable()"> after I have clicked the button.

The Button: <button id="calcGrades" onclick="calcGrades(),autoEnable()">Calculate Final Grades</button>

So far I have tried: document.getElementById("s1g1").setAttribute("oninput","script1(),script2()"); document.getElementById("s1g2").element('onInput()','script1(),script2()');

but neither have worked. I'm using a button to activate the above. I'm not sure what "oninput" is actually called, (Attribute? Element?).

ANSWER: I fixed it by using this syntax:

var s1g1 = document.getElementById("s1g1"); s1g1.setAttribute("oninput","calcGrades(),constraint()")

Will set both calcGrades() and constraint() when activated!

Possible duplicate of [setting oninput event with Javascript](https://stackoverflow.com/questions/9355499/setting-oninput-event-with-javascript) — Madhawa Priyashantha, Feb 28 '19 at 18:27
So really, your just saying that after the first click, you want subsequent clicks to to the same thing but also the `autoEnable` function? — Scott Marcus, Feb 28 '19 at 18:44
Possible duplicate of [How to call multiple JavaScript functions in onclick event?](https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event) — Heretic Monkey, Feb 28 '19 at 18:45
@ScottMarcus Exactly yes! if this is possible. This is as far as ive gotten: `s1g1 = document.getElementById("s1g1"); s1g1.oninput = "constraint(),calcRowGrades();"` It seems to change the oninput to blank but it won't assign it to anything — Graham Christopher Lambe, Feb 28 '19 at 18:55
See my updated answer for a working example. Provide some input to the input field and note that only `constraint` fires. Click the button (`calcGrades` and `autoEnable` both fire per your original code), then provide input into the field again and you'll see that both the desired functions now run. — Scott Marcus, Feb 28 '19 at 18:59

Scott Marcus · Answer 1 · 2019-02-28T18:57:56.760

0

Don't use oninput in the first place. Use .addEventListener():

// Get references to elements:
let input = document.getElementById("s1g1");
let btn = document.getElementById("calcGrades");

// Set up event handlers:
input.addEventListener("input", constraint); 
btn.addEventListener("click", function(){
  calcGrades();
  autoEnable();
});

// "Flag" to know if the button has been clicked before
let notClicked = true;

function constraint(){
  // Do whatever this function does
  console.log("function constraint invoked.");
  
  // Check to see if the button has not been clicked before
  if(notClicked){
    // Add a second event handler
    input.addEventListener("input", autoEnable);
    notClicked = false; // set flag so this won't happen again
  }
}

function calcGrades(){ console.log("function calcGrades invoked."); }
function autoEnable(){ console.log("function autoEnable invoked."); }

<!-- See how much cleaner the HTML is when we don't do event binding here? -->
<input type="number" placeholder="-" size="2" maxlength="3" id="s1g1">
<button id="calcGrades">Calculate Final Grades</button>

edited Feb 28 '19 at 18:57

answered Feb 28 '19 at 18:27

Scott Marcus

64,069
6
49
71

The problem is, I don't want script2 to be activated until after I have already clicked the button, but I want script1 to be working before the button is clicked. Will this achieve it? – Graham Christopher Lambe Feb 28 '19 at 18:39
@GrahamChristopherLambe It can, but you need to post the rest of the relevant code so we can get a sense of what you are doing. You would just set the button up with the first `.addEventListener()` by default and then add the second one in the handler of the first one. – Scott Marcus Feb 28 '19 at 18:43
I see where you're coming from however,the code you wrote points to the autoEnable() script and that is the part I can't get running as it invokes `document.getElementById("s1g1").setAttribute("oninput","constraint(),calcGrades()");` where the problem is at. Your code tidies it up however the problem is still in the code above, as I can't change the attributes it wont work. By chance do you know the notation to add oninput="constraint(),calcGrade()" to the html tag on button press? As this would fix it. – Graham Christopher Lambe Feb 28 '19 at 23:17
@GrahamChristopherLambe I think you misunderstand, you no longer need that `setAttribute` line. It wasn't clear what your functions do, so I just put placeholder functions there. If you run the code you will see that upon the first input, there is only one event handler that runs, but after clicking the button, there are two. – Scott Marcus Mar 01 '19 at 01:18
Check my updated question for the answer, it was "Element.setAttribute()" I was looking for, I just had the syntax wrong! – Graham Christopher Lambe Mar 01 '19 at 10:33
@GrahamChristopherLambe Again, you miss the point. You should not be setting up events using `onXyz` syntax in the first place. My answer shows you how to do what you need without any of that. – Scott Marcus Mar 01 '19 at 13:07

How to modify "oninput" with button?

1 Answers1