转换数组编号以与HTML类结合使用

Question

// Define  Min Number Range 

var Min = 10;
var Max = 40;

//Set NumberValues S1 + S2 == MainNumber

var S1 = Math.floor(Math.random() * (Max - Min + 1) + Min);
var S2 = Math.floor(Math.random() * (Max - Min + 1) + Min);

// Set Main Number Value & Random Number Value

var MainNumber = S1 + S2;
var RandomNumber = Math.floor(Math.random() * (Max - Min + 1) + Min);


// Assign Numbers To Random Buttons

var VMin = 1
var VMax = 3



function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  
     
  
  }
}

let arr = [1, 2, 3];
shuffle(arr);
//alert(arr);

var B1 = arr[0];
var B2 = arr[1];
var B3 = arr[2];

// Convert Number To HTML Elements

document.getElementById("p" + B1).innerHTML = S1;
document.getElementById("p" + B2).innerHTML = S2;
document.getElementById("p" + B3).innerHTML = RandomNumber;
document.getElementById("p4").innerHTML = MainNumber;

/*
document.getElementById("p1").value = S1;
document.getElementById("p2").value = S2;
document.getElementById("p3").value = RandomNumber;
*/   

console.log(B1, B2, B3);

console.log(S1);
console.log(S2);





// Run Checking Function To See If Both Input Fields Are Full


// Run Value Checking Function To See If Numbers Entered == MainNumber




/*
function Check()
{
        
        var UScore = 0;
    
        UN1 = document.getElementById("userInput1").value;
        UN2 = document.getElementById("userInput2").value;
    
        var IU1 = parseInt(UN1, 10);
        var IU2 = parseInt(UN2, 10);
    
        result = IU1 + IU2 == MainNumber;
           
        if(IU1 + IU2 == MainNumber) {
            
            document.getElementById("userInput1").value = ' ';
            document.getElementById("userInput2").value = ' ';
            UScore ++;
            
        }
    
            else {
                
                document.getElementById("userInput1").value = ' ';
                document.getElementById("userInput2").value = ' ';
                
            }
    

    
    
        console.log(result);
        console.log(UScore);
        
    
}
*/












// wrongcirlce
// #ffffff00 Transparent Color Code
// #f55050 Red Color Code










/*
function Check()                                    
{ 
    var UserInput1 = document.forms["calculator"]["userInput1"].value;
    var UserInput2 = document.forms["calculator"]["userInput2"].value;
    
    var result;
    
    function Sum(UI1, UI2) {
       
        return UI1 + UI2;

    }
    
    eval("result = Sum(UserInput1, UserInput2);");
}

*/

/*
var result;

function Sum(val1, val2)
{
    return val1 + val2;
}

eval("result = Sum(S1, S2);");

alert(result);
*/

// If First # < Main Number - None
//If First # + Second # > Main Number - Wrong


/*
var result;
function Sum(Val1, Val2) {
    
    return Val1 + Val2;
}

eval("result = Sum(S1, S2);")

var UserResult;
function SumUser(UVal1, UVal2) {
    return UVal1 + UVal2;
}

eval("UserResult = SumUser(Uval1, Uval2);")
*/

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.innerwrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
    margin-bottom: 40px;
}

.mainn {
  margin-bottom: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 700;
    margin-top: 20px;
    background-color: white;
}

.os1 {
  margin-right: 20px;
  font-size: 35px;
  line-height: 35px;
}

.os2 {
  margin-right: 20px;
  font-size: 35px;
  line-height: 35px;
}

.os3 {
  font-size: 35px;
  line-height: 35px;
}

.swrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.body {
  font-family: Montserrat, sans-serif;
}

.infotext {
  margin-bottom: 40px;
  font-size: 20px;
  line-height: 25px;
  font-style: italic;
  font-weight: 500;
}

.bmain {
  margin-right: 60px;
  padding-right: 100px;
  padding-left: 100px;
  border-radius: 5px;
}

.bmain.last {
  margin-right: 0px;
}



.wrongwrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.wrongcirlce {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff00;
}




@media (max-width: 991px) {
  .innerwrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .swrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .bmain {
    margin-right: 0px;
    margin-bottom: 60px;
    text-align: center;
  }
  .bmain.last {
    margin-bottom: 0px;
  }
}

@media (max-width: 479px) {
  .swrap {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .infotext {
    text-align: center;
  }
  .bmain {
    width: 90%;
  }
  .bmain.last {
    margin-bottom: 0px;
  }
}

<!DOCTYPE html>
<!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Tue Jul 16 2019 18:38:04 GMT+0000 (UTC)  -->
<html data-wf-page="5d2df8a4b1d78906a2509c25" data-wf-site="5d2df8a4b1d789c15c509c24">
<head>
  <meta charset="utf-8">
  <title>MathGame</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/mathgame.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="https://daks2k3a4ib2z.cloudfront.net/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png" rel="apple-touch-icon">
</head>
<body class="body">
  <form name="calculator">
    <div class="main">
    <div class="mainwrap">
      <div class="innerwrap">
         <input class="mainn" id ="userInput1" type="button" value="  ">
          <input class="mainn" id ="userInput2" type="button" value="  ">
         
          <div id="p4" class="mainn">0</div>
         
        <div class="infotext">Find The Sum Of This Number With The Option Below</div>
          
        <div class="swrap">
            
            <!--<button id="p1" class="bmain w-button" value="1">0</button>-->

            
            <input class="bmain w-button" id ="p1" type="button" value="" onclick="userInput1.value += value">
            <input class="bmain w-button" id ="p2" type="button" value="" onclick="userInput2.value += value   ">
            <input class="bmain w-button" id ="p3" type="button" value="" onclick="userInput2.value += value  ">
            <input class="bmain last w-button" type="button" value="Check" onclick="Check()">
           
            
          
          </div>
          
      </div>
        <div class ="wrongwrap">
            <div class="wrongcirlce"></div>
            <div class="wrongcirlce"></div>
            <div class="wrongcirlce"></div>
        
        
        </div>
    </div>
  </div>
    
     <script src="game.js"></script> 
    </form>
    
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

好吧，我做了一个函数，将1-3个数组随机排列，然后将这些随机排列的数字分别分配给变量B1-B3

我需要将它们与DOM结合起来，以便它更改正确的HTML元素。

我需要使用DOM类的HTML元素是p1-p3

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];



  }
}

let arr = [1, 2, 3];
shuffle(arr);
//alert(arr);

var B1 = arr[0];
var B2 = arr[1];
var B3 = arr[2];


document.getElementById("p" + B1).innerHTML = S1;

我希望能够将B1-B3变量添加到Dom中。