Generate word matching from set of user inputs

Question

My goal is to design a program that will take user input to create a title, keywords, and a set of matching descriptions. Once the user enters this into the UI and clicks generate_html the section should disappear. Then the word matching html should be generated with the user data.

For example, the input page would look like the figure shown below:

The word matching html would look like the figure shown below:

The code for the user input is the following

User Input:

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="el1" type="text" value="">
      </td>
      <td>
        <input id="el2" type="text" value="">
      </td>
      <td>
        <input id="el3" type="text" value="">
      </td>
      <td>
        <input id="el4" type="text" value="">
      </td>
      <td>
        <input id="el5" type="text" value="">
      </td>
    </table>
  </div>
</center>

Result in HTML:

<center>
  <div class="inputBoxes">
    <table id="tablestyle">
      <td>
        <input id="dl1" type="text" value="">
      </td>
      <td>
        <input id="dl2" type="text" value="">
      </td>
      <td>
        <input id="dl3" type="text" value="">
      </td>
      <td>
        <input id="dl4" type="text" value="">
      </td>
      <td>
        <input id="dl5" type="text" value="">
      </td>
    </table>
  </div>
</center>
<center>
  <center>
    <span style="padding: 3px">
              <button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
            </span>
  </center>

The code for the description and word matching is

<center>
    <div class="source">
      <div id="s1" class="draggyBox-small"></div>
      <div id="s2" class="draggyBox-small"></div>
      <div id="s3" class="draggyBox-large"></div>
      <div id="s4" class="draggyBox-small"></div>
      <div id="s5" class="draggyBox-small"></div>
    </div>
  </center>
  <table id="tablestyle">
    <tr id="row1">
      <td>
        <div id="t1" class="ltarget"></div>
      </td>
      <td id = "d1">
      </td>
    </tr>  
    <tr id="row2">
      <td>
        <div id="t2" class="ltarget"></div>
      </td>
      <td id = "d2">
      </td>
    </tr>  
    <tr id="row3">
      <td>
        <div id="t3" class="ltarget"></div>
      </td>
      <td id = "d3">
      </td>
    </tr>  
    <tr id="row4">
      <td>
        <div id="t4" class="ltarget"></div>
      </td>
      <td id = "d4">
      </td>
    </tr>  
    <tr id="row5">
      <td>
        <div id="t5" class="ltarget"></div>
      </td>
      <td id = "d5">
      </td>
    </tr>  
  </table>

The generate_html method is shown below

function generate_html() {
      el1 = document.getElementById("el1").value
      el2 = document.getElementById("el2").value
      el3 = document.getElementById("el3").value
      el4 = document.getElementById("el4").value
      el5 = document.getElementById("el5").value
      s1 = document.getElementById("s1")
      s2 = document.getElementById("s2")
      s3 = document.getElementById("s3")
      s4 = document.getElementById("s4")
      s5 = document.getElementById("s5")
      dl1 = document.getElementById("dl1").value
      dl2 = document.getElementById("dl2").value
      dl3 = document.getElementById("dl3").value
      dl4 = document.getElementById("dl4").value
      dl5 = document.getElementById("dl5").value
      d1 = document.getElementById("d1")
      d2 = document.getElementById("d2")
      d3 = document.getElementById("d3")
      d4 = document.getElementById("d4")
      d5 = document.getElementById("d5")
      s1.innerHTML = el1
      s2.innerHTML = el2
      s3.innerHTML = el3
      s4.innerHTML = el4
      s5.innerHTML = el5
      d3.innerHTML = dl1
      d4.innerHTML = dl2
      d5.innerHTML = dl3
      d1.innerHTML = dl4
      d2.innerHTML = dl5

      answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
      console.log(answer)
    }

As stated above, I'd like to break this up into two sections such that when the user clicks the generate_html button the section transitions to the word matching HTML. How can I achieve this?

Answer 1

I think your question is essentially, "How do I change the visibility of parts of the DOM on user input (e.g. the press of a button)?" The most basic answer is to use the CSS visibility property and set it in javascript via the HTML DOM style property.

I've translated your code into a working snippet below. See my comments inline for what I've changed. A couple of notes:

1. You didn't provide the table styling, or any other styling, for that matter, so it's unstyled in the snippet. Also, you set the tables to id="tablestyle" when I think you meant class="tablestyle", so I made that change. Having multiple elements with the same id is always a bad idea.
2. Even if the table were styled, one would be hard-pressed to get it looking like your screenshot. I suspect you have some styling that puts the table inline with all the draggyBoxes, but that seems rather clunkly to me, and also violates the div (new line) v. span (inline) rule. For a more modern approach, I would recommend familiarizing yourself with flexbox, which you can use pretty easily to replicate something like your screenshot.

function generate_html() {
      el1 = document.getElementById("el1").value
      el2 = document.getElementById("el2").value
      el3 = document.getElementById("el3").value
      el4 = document.getElementById("el4").value
      el5 = document.getElementById("el5").value
      s1 = document.getElementById("s1")
      s2 = document.getElementById("s2")
      s3 = document.getElementById("s3")
      s4 = document.getElementById("s4")
      s5 = document.getElementById("s5")
      dl1 = document.getElementById("dl1").value
      dl2 = document.getElementById("dl2").value
      dl3 = document.getElementById("dl3").value
      dl4 = document.getElementById("dl4").value
      dl5 = document.getElementById("dl5").value
      d1 = document.getElementById("d1")
      d2 = document.getElementById("d2")
      d3 = document.getElementById("d3")
      d4 = document.getElementById("d4")
      d5 = document.getElementById("d5")
      s1.innerHTML = el1
      s2.innerHTML = el2
      s3.innerHTML = el3
      s4.innerHTML = el4
      s5.innerHTML = el5
      d3.innerHTML = dl1
      d4.innerHTML = dl2
      d5.innerHTML = dl3
      d1.innerHTML = dl4
      d2.innerHTML = dl5
      
      // get the input and results sections and flip their visibilities
      document.getElementById("input-section").style.visibility = "hidden"
      document.getElementById("results-section").style.visibility = "visible"
      

      answer = el4+": "+dl4+"\n"+el5+": "+dl5+"\n"+el1+": "+dl1+"\n"+el2+": "+dl2+"\n"+el3+": "+dl3
      console.log(answer)
    }

<!-- Added input-section div so that we can control its visibility -->
<div id="input-section">
  <center>
    <div class="inputBoxes">
      <table class="tablestyle">
        <td>
          <input id="el1" type="text" value="1">
        </td>
        <td>
          <input id="el2" type="text" value="2">
        </td>
        <td>
          <input id="el3" type="text" value="3">
        </td>
        <td>
          <input id="el4" type="text" value="4">
        </td>
        <td>
          <input id="el5" type="text" value="5">
        </td>
      </table>
    </div>
    <div class="inputBoxes">
      <table class="tablestyle">
        <td>
          <input id="dl1" type="text" value="6">
        </td>
        <td>
          <input id="dl2" type="text" value="7">
        </td>
        <td>
          <input id="dl3" type="text" value="8">
        </td>
        <td>
          <input id="dl4" type="text" value="9">
        </td>
        <td>
          <input id="dl5" type="text" value="10">
        </td>
      </table>
    </div>
    <div style="padding: 3px">
                <button id ="one" class="button" type="button" onClick="generate_html()">generate html</button>
    </div>
  </center> 
</div>

<!-- Added results-section div so that we can control its visibility,
     initially set to "hidden" -->
<div id="results-section" style="visibility: hidden">
  <center>
    <div class="source">
      <div id="s1" class="draggyBox-small"></div>
      <div id="s2" class="draggyBox-small"></div>
      <div id="s3" class="draggyBox-large"></div>
      <div id="s4" class="draggyBox-small"></div>
      <div id="s5" class="draggyBox-small"></div>
    </div>
  </center>
  <table class="tablestyle">
    <tr id="row1">
      <td>
        <div id="t1" class="ltarget"></div>
      </td>
      <td id = "d1">
      </td>
    </tr>  
    <tr id="row2">
      <td>
        <div id="t2" class="ltarget"></div>
      </td>
      <td id = "d2">
      </td>
    </tr>  
    <tr id="row3">
      <td>
        <div id="t3" class="ltarget"></div>
      </td>
      <td id = "d3">
      </td>
    </tr>  
    <tr id="row4">
      <td>
        <div id="t4" class="ltarget"></div>
      </td>
      <td id = "d4">
      </td>
    </tr>  
    <tr id="row5">
      <td>
        <div id="t5" class="ltarget"></div>
      </td>
      <td id = "d5">
      </td>
    </tr>  
  </table>
</div>