Passing a parameter to html from javascript file

Question

I have the following js code which create a table if certain condition satisfied, inside the table I created a column which contains an HTML submit form , however I want to pass a parameter to another function when the button is clicked

function numberOne(event){

paramterToBePassed = somthing;

//somecode

table = innerHTML = '<tr><th>column</th></tr>';

// somecode

let x = doument.createElement('td');

somecode

x.innerHTML = <form onSubmit="return numberTwo($parameterToBePassed)"> <input type"text"> <input type="submit>
}

You've either to pass a global variable or a hardcoded value. Make your life easier, [don't use inline listeners](https://stackoverflow.com/questions/62462554/how-does-the-way-in-which-a-javascript-event-handler-is-assigned-affect-its-exec/63119431#63119431). — Teemu, Aug 25 '20 at 05:31

score 0 · Answer 1 · answered Aug 25 '20 at 05:32

Just to clarify, you want to change the state of some variable when the submit button is clicked? If so, then you'll need to ensure that the variable is in scope of the function that is modifying / accessing it. Global scopes aren't generally recommended, but definitely useful in certain scenarios.

Add a event listener to the submit button. You can do that by:

const formButton = document.getElementById('#form-submit');

formButton.addEventListener('submit', (event) => {
  // Do something here to change the state of the scoped variable.
  // Alternatively, you can get the value you want and call numberTwo(...) here
})

If you want to block the submit behavior, event.preventDefault() is required, but you can leave that if you still want the form to submit correctly.

Passing a parameter to html from javascript file

1 Answers1