Working out the mechanics for page number input

Working out the mechanics for page number input

inputPageNumbers.html

@@ -13,11 +13,35 @@
   <script src="script.js"></script>
 
   <div id="gameArea">
+    <h3> Page Numbers </h3>
+    <h3> Old Testament</h3>
+    <div>
+      <!-- Genesis Start -->
+      <label id="label"> Genesis </label> <input id="genesisPage" maxlength="4" size="4"> <br>
+      <!-- Genesis end -->
 
-    <h1> Welcome</h1>
-    <label> username</label>
-    <input id="myText"> <br>
-    <button id="mySubmit" onclick="test()"> submit</button>
+      <!-- Exodus Start -->
+      <label id="label"> Exodus </label> <input id="exodusPage" maxlength="4" size="4"> <br>
+      <!-- Exodus end -->
+
+      <!-- Leviticus Start -->
+      <label id="label"> Leviticus </label> <input id="leviticusPage" maxlength="4" size="4"> <br>
+      <!-- Leviticus end -->
+
+      <!-- Numbers Start -->
+      <label id="label"> Numbers </label> <input id="numbersPage" maxlength="4" size="4"> <br>
+      <!-- Numbers end -->
+
+      <!-- Deuteronomy Start -->
+      <label id="label"> Deuteronomy </label> <input id="deuteronomyPage" maxlength="4" size="4"> <br>
+      <!-- Deuteronomy end -->
+
+      <!-- Joshua Start -->
+      <label id="label">  Joshua </label> <input id="joshuaPage" maxlength="4" size="4"> <br>
+      <!--  Joshua end -->
+    </div>
+
+    <button id="mySubmit" onclick="pageNumbers()"> submit</button>
     <div id="appear"> </div>
   </div>
 

script.js

@@ -295,9 +295,39 @@ const display = document.getElementById('appear');
 const roundDisplay = document.getElementById('round');
 
 
-function test (){
-  username = document.getElementById("myText").value;
-  finalMessage = `userName: ${username}`;
-  console.log(username);
+let genesisPage;
+let exodusPage;
+function pageNumbers (){
+  // Genesis Page number start
+  genesisPage = document.getElementById("genesisPage").value;
+console.log(`Genesis page Number: ${genesisPage}`)
+  // Genesis end
+
+  // Exodus page number start
+  exodusPage = document.getElementById("exodusPage").value;
+  console.log(`Exodus page Number: ${exodusPage}`)
+  // Exodus page number end
+
+  // Leviticus page number start
+  leviticusPage = document.getElementById("leviticusPage").value;
+  console.log(`Leviticus page Number: ${leviticusPage}`)
+  // Leviticus page number end
+
+  // Numbers page number start
+  numbersPage = document.getElementById("numbersPage").value;
+  console.log(`Numbers page Number: ${numbersPage}`)
+  // Numbers page number end
+
+  //  Deuteronomy page number start
+  deuteronomyPage = document.getElementById(" deuteronomyPage").value;
+  console.log(`Numbers page Number: ${deuteronomyPage}`)
+  //  Deuteronomy page number end
+
+  // Joshua page number start
+  joshuaPage = document.getElementById("joshuaPage").value;
+  console.log(`Joshua page Number: ${joshuaPage}`)
+  // Joshua page number end
+
+
 }
 

style.css

@@ -28,3 +28,11 @@ button {
 #home{
 
 }
+
+#label{
+font-size: 20px;
+}
+
+#input{
+
+}