如何在列中放置多个元素

Question

我正在制作一张美国地图，当您点击一个州时，您必须回答州首府。我使用 3 列来跟踪答案。一栏是正确答案，第二栏是错误答案，第三栏是未回答的状态。到目前为止，我已经设置好了，当答案正确时，它可以进入第一列，第二列也是如此。不幸的是，我不知道如何让所有州名都以第三个 "unanswered column" 开头。到目前为止，这是我的代码：

var alts = "";

function loadMap() {
    var map = document.getElementById("statemap");
    map.addEventListener("click", function(evt) {
        var alt = evt.target.alt;
        alts = alt;
        var id = evt.target.id;
        ids = id;
        document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
    });
}

function shows() {
    document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."

}

function show() {
    document.getElementById("text").value = "";
    document.getElementById('divIdAnswer').innerHTML = "";
}

function checkAnswer() {
    if (!alts) {
        document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
        return;
    }
    var submittedAnswer = document.getElementById('text').value;
    var correctAnswer = alts;
    if (submittedAnswer == correctAnswer) {
        document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
        document.getElementById('divCorrect').innerHTML += ids + "<br>";
    } else if (submittedAnswer != correctAnswer) {
        document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
        document.getElementById('divIncorrect').innerHTML += ids + "<br>"
    }
 
    alts = "";
   
}

.column {
    float: left;
    position: relative;
    width: 300px;
 height: 200px;
    border: 0px;
    box-sizing: border-box;
}
  
body {
    padding: 10 px;
    text-align: center;
    background_color: #GF5D89
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

<body onload="loadMap(); shows()">
    <h1>Do you know the capitals of each of the United States of America?</h1>
    <h2>Use this map to test your knowledge.</h2>
    <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

    <map id="statemap" name="statemap">
        <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
        <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
        <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
        <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
        <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
        <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
        <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
        <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
        <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
        <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
        <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
        <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
        <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
        <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
        <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
        <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
        <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
        <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
        <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
        <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
        <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
        <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
        <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
        <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
    <div id="divIdMessage"></div>
    <br>
    <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
    <br>
    <br>
    <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
    <br>
    <br>
    <div id="divIdAnswer"></div>
    <br>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
          <h3>Correct Answers</h3>
          <p id="divCorrect"></p>
        </div>
        <div class="column" style="background-color:#bbb">
          <h3>Incorrect Answers</h3>
          <p id="divIncorrect"></p>
        </div>
        <div class="column" style="background-color:#ccc;">
          <h3>No Answers</h3>
          <p id="divNone"></p>
        </div>
        <br>
    </div>
</body>

Answer 1

使用百分比宽度 .column 而不是固定的 wone

.column{ width : 33.33%; }

var alts = "";

function loadMap() {
  var map = document.getElementById("statemap");
  map.addEventListener("click", function(evt) {
    var alt = evt.target.alt;
    alts = alt;
    var id = evt.target.id;
    ids = id;
    document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
  });
}


function shows() {
  document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."

}

function show() {
  document.getElementById("text").value = "";
  document.getElementById('divIdAnswer').innerHTML = "";
}


function checkAnswer() {
  if (!alts) {
    document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
    return;
  }
  var submittedAnswer = document.getElementById('text').value;
  var correctAnswer = alts;
  if (submittedAnswer == correctAnswer) {
    document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
    document.getElementById('divCorrect').innerHTML += ids + "<br>";
  } else if (submittedAnswer != correctAnswer) {
    document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
    document.getElementById('divIncorrect').innerHTML += ids + "<br>"
  }

  alts = "";

}

.column {
  float: left;
  position: relative;
  width: 33.33%;
  height: 200px;
  border: 0px;
  box-sizing: border-box;
}

body {
  padding: 10 px;
  text-align: center;
  background-color: #GF5D89;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

<body onload="loadMap(); shows()">
  <h1>Do you know the capitals of each of the United States of America?</h1>
  <h2>Use this map to test your knowledge.</h2>
  <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

  <map id="statemap" name="statemap">
        <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
        <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
        <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
        <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
        <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
        <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
        <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
        <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
        <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
        <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
        <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
        <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
        <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
        <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
        <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
        <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
        <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
        <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
        <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
        <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
        <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
        <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
        <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
        <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
  <div id="divIdMessage"></div>
  <br>
  <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
  <br>
  <br>
  <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
  <br>
  <br>
  <div id="divIdAnswer"></div>
  <br>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h3>Correct Answers</h3>
      <p id="divCorrect"></p>
    </div>
    <div class="column" style="background-color:#bbb">
      <h3>Incorrect Answers</h3>
      <p id="divIncorrect"></p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h3>No Answers</h3>
      <p id="divNone"></p>
    </div>
    <br>
  </div>
</body>

Answer 2

您可以使用 for 循环遍历 #statesmap 的子项：

var unansColumn = document.getElementById("divNone");
var states = document.getElementById("statemap").children;
var stateName;
var tmpStateDiv;
for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    tmpStateDiv = document.createElement('DIV');
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName);
    tmpStateDiv.appendChild(document.createTextNode(stateName));
    unansColumn.appendChild(tmpStateDiv); 
}

这种方法的一个优点是它不仅适用于美国；如果您将地图更改为加拿大地图，并更新您的#statesmap div 以列出加拿大各州，它应该可以正常工作而无需修改。

var alts = "";

function resetColumns() {
  var state;
  var stateName;
  var tmpStateDiv;
  var states = document.getElementById('statemap').children;
  var corColumn = document.getElementById('divCorrect');
  var incorColumn = document.getElementById('divIncorrect');
  var unansColumn = document.getElementById('divNone');
  corColumn.innerHTML = '';
  incorColumn.innerHTML = '';
  for (var i = 0; i < states.length; i++) {
    state = states[i];
    stateName = state.getAttribute('id');
    //unansColumn.innerHTML += "<div id= \"" + state.getAttribute('id') + "\">" + state.getAttribute('id') + "</div>"; <-- bad code, bad bjonnfesk
    /*----------------------*/
    //instead, do: 
    tmpStateDiv = document.createElement('DIV'); //create a new element of type div, into which we will put the name of the state we are processing...
    tmpStateDiv.setAttribute('id', 'unanswered' + stateName); //set its id to 'unanswered' + name of the state, for instance 'unansweredOregon' (to avoid an id conflict). It needs to have an id so that we can remove it later, when the state is answered.
    tmpStateDiv.appendChild(document.createTextNode(stateName)); //write the name of the state to the element
    unansColumn.appendChild(tmpStateDiv); //finally, add the entire div element to the list of unanswered states
  }
}

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById('divNone');
  //unansweredStates.removeChild(unansweredStates.querySelector('#' + id)); <--here a modification is also necessary:
  unansweredStates.removeChild(unansweredStates.querySelector('#unanswered' + id)); //otherwise, since we changed the ids of the states in the unanswered column, our querySelector would not match the state when it is time for it to be removed.
}

function loadMap() {
  var map = document.getElementById("statemap");
  map.addEventListener("click", function(evt) {
    var alt = evt.target.alt;
    alts = alt;
    var id = evt.target.id;
    ids = id;
    document.getElementById("divIdMessage").innerHTML = "What is the capital of " + evt.target.id + "?";
  });
}


function shows() {
  document.getElementById("divIdMessage").innerHTML = "Click on a state to get started.";

}

function show() {
  document.getElementById("text").value = "";
  document.getElementById("divIdAnswer").innerHTML = "";
}


function checkAnswer() {
  if (!alts) {
    document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
    return;
  }
  var submittedAnswer = document.getElementById("text").value;
  var correctAnswer = alts;
  if (submittedAnswer == correctAnswer) {
    document.getElementById("divIdAnswer").innerHTML = "Good job, that is correct!";
    document.getElementById("divCorrect").innerHTML += ids + "<br>";
  } else if (submittedAnswer != correctAnswer) {
    document.getElementById("divIdAnswer").innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
    document.getElementById("divIncorrect").innerHTML += ids + "<br>";
  }

  alts = "";
  removeFromUnanswered(ids);
}

.column {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  border: 0px;
  box-sizing: border-box;
}

body {
  padding: 10 px;
  text-align: center;
  background-color: #FF5D89;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body onload="setTimeout(function() {
    loadMap();
    shows();   
    resetColumns();
  }, 1000);">
  <h1>Do you know the capitals of each of the United States of America?</h1>
  <h2>Use this map to test your knowledge.</h2>
  <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png" width="819" height="492" alt="States" usemap="#statemap">

  <map id="statemap" name="statemap">
      <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
      <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
      <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
      <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
      <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
      <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
      <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
      <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
      <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
      <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
      <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
      <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
      <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
      <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
      <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
      <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
      <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
      <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
      <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
      <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
      <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
      <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
      <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
      <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
    </map>
  <div id="divIdMessage">&nbsp;</div>
  <br>
  <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
  <br>
  <br>
  <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
  <br>
  <br>
  <div id="divIdAnswer"></div>
  <br>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h3>Correct Answers</h3>
      <p id="divCorrect"></p>
    </div>
    <div class="column" style="background-color:#bbb">
      <h3>Incorrect Answers</h3>
      <p id="divIncorrect"></p>
    </div>
    <div class="column" style="background-color:#ccc;">
      <h3>No Answers</h3>
      <p id="divNone"></p>
    </div>
    <br>
  </div>
</body>

</html>

我还冒昧地纠正了您代码中的其他一些问题，这些问题导致您的背景颜色属性（拼写错误为 background_color）生效。

编辑 1：我假设您也希望在回答后从未回答的列中删除已回答的状态。将此函数添加到您的脚本中，例如在 loadMap() 上方：

function removeFromUnanswered(id) {
  var unansweredStates = document.getElementById("divNone");
  unansweredStates.removeChild(unansweredStates.querySelector("#unanswered" + id));
}

...然后在检查答案后调用该函数 checkAnswer:

function checkAnswer() {
  ...
  alts = "";
  removeFromUnanswered(ids);
}

编辑 2：替换了错误代码并改进了格式。新代码有注释解释，比旧代码更易读。

Answer 3

Start by printing out the names of all the states. Do that by creating an array by iterating your DOM. Print that array. When the user submits an answer, delete that answer from your array then re-print the array.

> 
> var alts = "";
> 
> function loadMap() {
>     var map = document.getElementById("statemap");
>     map.addEventListener("click", function(evt) {
>         var alt = evt.target.alt;
>         alts = alt;
>         var id = evt.target.id;
>         ids = id;
>         document.getElementById('divIdMessage').innerHTML = "What is the capital of " + evt.target.id + "?";
>     }); } var arrayUnansw=[]; function createArray(){
>     var query = document.getElementsByTagName("area");
>     for(var i=0;i<query.length;i++){
>       arrayUnansw.push(query[i].getAttribute("id"));
>     } } function printArray(){   var container = document.getElementById("divNone");   for(var
> i=0;i<arrayUnansw.length;i++){
>     container.innerHTML+=arrayUnansw[i]+"<br>";   } } createArray(); printArray(); function shows() {
>     document.getElementById("divIdMessage").innerHTML = "Click on a state to get started."
> 
> }
> 
> function show() {
>     document.getElementById("text").value = "";
>     document.getElementById('divIdAnswer').innerHTML = ""; }
> 
> 
> function checkAnswer() {
>     if (!alts) {
>         document.getElementById("divIdAnswer").innerHTML = "Must click on a state first.";
>         return;
>     }
>     var submittedAnswer = document.getElementById('text').value;
>     var correctAnswer = alts;
>     if (submittedAnswer == correctAnswer) {
>         document.getElementById('divIdAnswer').innerHTML = "Good job, that is correct!";
>         document.getElementById('divCorrect').innerHTML += ids + "<br>";
> 
>     } else if (submittedAnswer != correctAnswer) {
>         document.getElementById('divIdAnswer').innerHTML = "I'm sorry, that is incorrect. The correct answer is: " + alts + ".";
>         document.getElementById('divIncorrect').innerHTML += ids + "<br>"
>     }
>     var index = arrayUnansw.indexOf(ids);
>     console.log(index);
>     if(index!==-1)arrayUnansw.splice(index,1);
>     document.getElementById("divNone").innerHTML="";
>     printArray();
>     alts = "";
> 
> }

> 
>     <style>
>     .column {
>         float: left;
>         position: relative;
>         width: 300px;
>      height: 200px;
>         border: 0px;
>         box-sizing: border-box;
>     }
> 
>     body {
>         padding: 10 px;
>         text-align: center;
>         background_color: #GF5D89
>         font-family: "Trebuchet MS", Helvetica, sans-serif;
>     }
>     }
>     </style>
> 
>

> 
>     <body onload="loadMap(); shows()">
>         <h1>Do you know the capitals of each of the United States of America?</h1>
>         <h2>Use this map to test your knowledge.</h2>
>         <img src="http://www.conceptdraw.com/How-To-Guide/picture/Geo-Map--USA.png"
> width="819" height="492" alt="States" usemap="#statemap">
> 
>         <map id="statemap" name="statemap">
>             <area shape="rect" coords="30,80,120,130" id="Oregon" alt="Salem" onClick="show()"/>
>             <area shape="rect" coords="60,70,130,20" id="Washington" alt="Olympia" onClick="show()" />
>             <area shape="rect" coords="80,170,130,220" id="Nevada" alt="Carson City" onClick="show()" />
>             <area shape="rect" coords="125,110,185,150" id="Boise" alt="Idaho" onClick="show()" />
>             <area shape="rect" coords="180,50,260,100" id="Montana" alt="Helena" onClick="show()"/>
>             <area shape="rect" coords="200,125,280,185" id="Wyoming" alt="Cheyenne" onClick="show()" />
>             <area shape="rect" coords="50,380,130,430" id="Alaska" alt="Juno" onClick="show()" />
>             <area shape="rect" coords="140,180,210,250" id="Utah" alt="U" onClick="show()" />
>             <area shape="rect" coords="130,260,190,330" id="Arizona" alt="A" onClick="show()" />
>             <area shape="rect" coords="215,195,300,255" id="Colorado" alt="Colorado" onClick="show()" />
>             <area shape="rect" coords="205,260,280,350" id="New Mexico" alt="New Mexico" onClick="show()" />
>             <area shape="rect" coords="330,270,410,320" id="Oklahoma" alt="Oklahoma" onClick="show()" />
>             <area shape="rect" coords="420,275,470,340" id="Arkansas" alt="Arkansas" onClick="show()" />
>             <area shape="rect" coords="310,220,410,270" id="Kansas" alt="Kansas" onClick="show()" />
>             <area shape="rect" coords="410,230,470,275" id="Missouri" alt="Missouri" onClick="show()" />
>             <area shape="rect" coords="310,170,390,220" id="Nebraska" alt="Nebraska" onClick="show()" />
>             <area shape="rect" coords="290,110,380,160" id="South Dakota" alt="South Dakota" onClick="show()" />
>             <area shape="rect" coords="390,150,450,200" id="Iowa" alt="Iowa" onClick="show()" />
>             <area shape="rect" coords="290,50,380,100" id="North Dakota" alt="North Dakota" onClick="show()" />
>             <area shape="rect" coords="380,60,440,150" id="Minnesota" alt="Minnesota" onClick="show()" />
>             <area shape="rect" coords="280,320,390,430" id="Texas" alt="Texas" onClick="show()" />
>             <area shape="rect" coords="420,370,490,400" id="Louisiana" alt="Louisiana" onClick="show()" />
>             <area shape="rect" coords="195,410,280,490" id="Hawaii" alt="Hawaii" onClick="show()" />
>             <area shape="rect" coords="20,210,90,250" id="California" alt="California" onClick="show()" />
>         </map>
>       <div id="divIdMessage"></div>
>       <br>
>       <textarea id="text" style="text-align:center; margin: 0 auto">Type answer here</textarea>
>       <br>
>       <br>
>       <input type="button" id="myBtn" value="Check Answer" style="text-align:center; margin: 0 auto" onClick="checkAnswer()">
>       <br>
>       <br>
>       <div id="divIdAnswer"></div>
>       <br>
>       <div class="row">
>       <div class="column" style="background-color:#aaa;">
>         <h3>Correct Answers</h3>
>         <p id="divCorrect"></p>
>       </div>
>       <div class="column" style="background-color:#bbb">
>         <h3>Incorrect Answers</h3>
>         <p id="divIncorrect"></p>
>       </div>
>       <div class="column" style="background-color:#ccc;">
>         <h3>No Answers</h3>
>         <p id="divNone"></p>
>       </div>
>       <br>
>     </div>
>       </body>
> 
>

编辑：搞砸了格式。对不起！但是检查一下，它有效。

如何在列中放置多个元素

How to put multiple elements in columns

html

javascript

css

onload

multiple-columns

您可以使用 for 循环遍历 #statesmap 的子项：