Realization of English word bank with JavaScript

Time:2021-2-22

This example for you to share the JavaScript production simple word test library specific code, for your reference, the specific content is as follows

Using session storage and local storage to make an English word bank

Since there are three pages, the HTML code and CSS code are only shown for reference

<div>
 <h1>Word entry</h2>
 <hr><br>
 <span>English:</span><input type="text" name="en"><br>
 <span>Chinese: < / span > < input type = "text" name = "CN" > < br >
 < button value > < br > < br > save
 <hr style=" border-top:10px dotted #4285f4;" /><br><br>
 < button > start test
 <span>You have entered 0 groups of words</span>
 </div>

Page 1js

var en = document.getElementsByName("en")[0];
var cn = document.getElementsByName("cn")[0];
var btn = document.getElementsByClassName("btn")[0];
var start = document.getElementsByClassName("start")[0];
var num = document.getElementsByClassName("num")[0];
num.innerHTML  =You have entered it${ localStorage.length }Group words`
btn.onclick = function(){
  localStorage.setItem(cn.value,en.value);
  document.getElementsByName("en")[0].value = '';
  document.getElementsByName("cn")[0].value = '';
  //Num is the length of the data stored in localstorage
  for(var i = 0 ; i<=localStorage.length;i++){
  num.innerHTML  =You have entered a ${I} group of words`
  }
 }
 start.onclick = function(){
  Confirm ('are you sure you want to start the test now? ');
  location.href = 'test.html';
 }

Page 2JS

var test = document.getElementById("test");
 var arr = new Array();
 var start = document.getElementsByClassName("start")[0];
 //Traverse the localstorage object and store the key and value in the new arr array
 for(var i = 0; i < localStorage.length; i++) {
     var getKey = localStorage.key(i);
     var getVal = localStorage.getItem(getKey);
     arr[i] = {
       'key': getKey,
       'val': getVal,
     }
   }
   var btn = document.getElementsByClassName("btn")[0];
   //Initialize the total number of questions, correct number and error number
   var all = arr.length;
   var right = 0;
   var wrong = 0;
   sessionStorage.setItem ('question bank ', all);
   btn.onclick = function(){
   //Judge whether there is data in the array
   if (arr.length) {
    //Randomly select a question in the array and display it on the page
    let index = Math.floor(Math.random()*arr.length);
    test.innerHTML=`<span>${arr[index].key}:</span><input type="text" name="cn" autocomplete="off"><br>`;
    var cn = document.getElementsByName("cn")[0];
    //After input defocusing, the value is compared with the stored data
    cn.onblur = function(){
    if (cn.value == arr[index].val) {
     right++;
    }else{
     wrong++;
    }
    //Store correct and wrong numbers
    sessionStorage.setItem('right',right);
    sessionStorage.setItem('wrong',wrong);
    //To prevent the following problem, delete it from the array
    arr.splice(index,1);
    }  
   }else{
    test.innerHTML  =This is the last question`
   }  
   }
   start.onclick = function(){
   Confirm ('are you sure you want to submit the answer? ');
   location.href = 'result.html'
   }

Page 3js

var all = document.getElementById("all");
var right = document.getElementById("right");
 var wrong = document.getElementById("wrong");
 all.innerHTML  =Session storage;
 right.innerHTML = sessionStorage.right;
 wrong.innerHTML = sessionStorage.wrong;
 var start = document.getElementsByClassName("start")[0];
 var again = document.getElementsByClassName("again")[0];
 start.onclick = function(){
  location.href = "save.html";
 }
 again.onclick = function(){
  location.href = "test.html"
 }

Here are two web stored graphs for emphasis

The key is to store the data in localstorage, and then store the key value pairs in the array for our subsequent use. The content of interface 2 is to put the contents of the array into the page in random order, and judge after the input box loses focus to save the correct and wrong answers (note that you can’t judge when you click the next one, because the data content corresponding to the input box at this time and changes) in order to output the final quantity, and some other comments have been written in the code.

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.