How to transfer array values in JS to html before the file switches using Ajax

Question

This is the HTML code in file 1, which is calling the function. It is linked to javascript

<form id='next'  action='file2.html'>
    <button id="nextTwo" onclick="nextTwo()">next2</button>
</form>

This is the JS code that receives the function.

function nextTwo(){
   document.getElementById('question').innerHTML=question
}

It is searching for the id before the file changes to where the id is.

Every time I press the button that calls the function it gives me:

"TypeError: Cannot set properties of null (setting 'innerHTML')"

This is because it is searching for the id of "question" in file 1, but the id is in file 2. It tries to find the id in file 1, then it switches to file 2, where the id of "question" is.

How do I make it so that is switches to file 2 first, then searches for the id.

Maybe an if statement with a condition, if the file is switched, although I don't know the how to write that.

Thanks for your help.

This is my Js code, how do I place the arrays value into the file 2 using ajax?

let ants;
    let question;
    let squestion;
function check() //CHECK
{
 

 switch(1){ //different header number is fine but do '' BUT input box will still be there
case 0:
ants = ['calculations'] 
     question=["Element Symbol that has the atomic number of... ","atomic mass of (round to nearest whole number)..."] 
         squestion=["1. 50","2. 2","3. 20","4. K"] 
  case 1:  
ants = ["0 (all atoms have a charge of 0)","11","11","4","9","Be","8","8","8"] 
question=["Sodium has 11 protons and an mass of 23. What is the...","An atom has an atomic# of 4 and 5 neutrons What is the...", "Oxygen has 8 electrons and a mass of 16"] 

squestion=["charge","atomic#","#of electrons", "#of protons","Mass","element symbol", "#of protons", "atomic#", "#of neutrons"] 

    //  ants = ["Sn  ","He ","Ca ","39 ", "32  ","Sn ","He ","Ca",] 
    //  question=["Element Symbol that has the atomic number of... ","atomic mass of (round to nearest whole number)..."] 
    // squestion=["1. 50","2. 2","3. 20","4. K"] 
      break;
      case 2:
  ants = ["Carbon", "Chlorine", "Bromine",'Br',"Li","Sc","2","8","8" ] 
  question=["Carbon", "Chlorine", "Bromine", "Helium",'Br',"Li","Sc" ] 
  squestion=[] 
      }

cssyphus · Answer 1 · 2021-12-02T22:05:48.190

There is a better way to go about this.

By design, forms do not communicate two-way. They take the data entered by the user and carry it over to the processing file (defined by the action= parameter on the form tag). The user is navigated away from the first webpage, and the view changes to that processing file - and it isn't supposed to go back to the first file again. Forms are very basic, primitive constructs.

This is why forms have been almost entirely replaced by AJAX. AJAX is a very simple JavaScript construct (made even simpler via jQuery - TANGENT: although jQuery is no longer recommended because modern JavaScript has made the process much easier - but the jQuery $.ajax() method still works fine and there is tons of info about how to use it).

AJAX allows you to send data from a web page to a back-end (server-side) file that receives any data you send it (optional), does something (optional), and returns new data (optional). The page the user is on need not change, blink or flash. New data received from the server-side file can be received and actively used before returning control to the user... So this sounds like exactly what you need it to do.

The back-end (AJAX) processing file is written in a server-side language (PHP, NodeJS, ASP.Net, Python, etc - PHP is a very popular one for AJAX), but you did not specify which one you wish to use, which is likely why no one responded to your question sooner.

Here are some references that might help. I chose jQuery examples because the AJAX code block $.ajax( //code goes here ).done() is very simple. To do AJAX in pure JavaScript, look for information regarding the Fetch API (newest), and XmlHTTPRequest (older).

Simple jQuery example

Ajax explained with jQuery

Another simple example with explanation

Here is a pure javascript video tutorial (5 mins)

After reviewing the examples, you can construct a basic AJAX test on your side and, if you have any trouble with it, ask another question specifying which language you are trying to do this with, and showing your code so far.

Thanks for the answer. I know how to use ajax to Render HTML Dynamically Using AJAX, although how do I put an array defined in javascript into a html file using ajax? I am using a switch statement that has the expression (page number) change every time I click the button on the first page. Each case number redefines a variable that I want to show on the second page. — Joshua, Dec 02 '21 at 22:49
My code for this is in the question. I can't figure out how to add code in comments — Joshua, Dec 02 '21 at 23:11

How to transfer array values in JS to html before the file switches using Ajax

1 Answers1