Как изменить "oninput" с помощью кнопки? - PullRequest
Новая
       20

Как изменить "oninput" с помощью кнопки?

0 голосов
/ 28 февраля 2019

Каков наилучший способ добавить oninput = "insertScriptHere,insertScript2Here" в таблицу данных, если в таблице уже есть oninput = "insertScriptHere?Я только хочу, чтобы второй сценарий включался в oninput после нажатия кнопки.

Повторно: у меня есть <input type="number" placeholder="-" size="2" maxlength="3" id="s1g1" oninput="constraint(this)">, и я хочу изменить его на <input type="number" placeholder="-" size="2" maxlength="3" id="s1g1" oninput="constraint(this),autoEnable()"> после того, как я нажму кнопку.

Кнопка: <button id="calcGrades" onclick="calcGrades(),autoEnable()">Calculate Final Grades</button>

Пока я пробовал: document.getElementById("s1g1").setAttribute("oninput","script1(),script2()"); document.getElementById("s1g2").element('onInput()','script1(),script2()');

, но ни одна из них не сработала.Я использую кнопку, чтобы активировать выше.Я не уверен, что на самом деле называется «oninput» (Атрибут? Элемент?).

ОТВЕТ: Я исправил это, используя следующий синтаксис:

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

Устанавливаем как calcGrades (), так и ограничение () при активации!

1 Ответ

0 голосов
/ 28 февраля 2019

Не используйте oninput во-первых.Используйте .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>
...