世界地图数组javascript

我有一个SVG世界地图，其中的元素由以下结构组成

  <path
     inkscape:connector-curvature="0"
     id="AF"
     data-name="Afghanistan"
     data-id="AF"
     d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z"
     style="fill:#f2f2f2;fill-rule:evenodd" />

单击正在使用的函数：

<path
     inkscape:connector-curvature="0"
     id="Algeria"
     onmouseover="displayName('Algeria')"
     onclick="onClickHandler(this)"

---

这似乎与您的另一个问题有关：

所以我从这个问题的答案开始，试着给出一个最小的可重复的例子（）

如果SVG路径更多，它会工作得更平滑，所以如果您提供这些路径，我也可以添加它们

简言之，发生了什么：


单击该按钮时，它会选择一条随机的国家/地区路径，并将其名称放入h4标记的范围中
单击某个国家/地区时，如果该国家/地区与“跨距在h4”标记中的国家/地区相同，则将该国家/地区填充为绿色，否则为红色
再次单击按钮时，循环所有国家/地区路径并将其填充重置为初始灰色


const targetSpan=document.querySelector（“#target”）
const allpath=document.queryselectoral（'svg>path'）；
函数显示名（elem）{
console.log（元素id）
}
forEach（elem=>elem.addEventListener（'click'，myFuncHandler））；
函数myFuncHandler（e）{
const country_id=e.target.id
const thisCountry=e.target.getAttribute（'data-name'）；
const color=thisCountry==targetSpan.innerHTML？#004400:#8a0000；
e、 target.style.fill=颜色；
}
const startButton=document.querySelector（“#startButton”）；
startButton.addEventListener（'click'，e=>{
const randIndex=Math.floor（Math.random（）*（allpath.length））；
const randCountry=所有路径[randIndex]；
targetSpan.innerHTML=randCountry.getAttribute（'data-name'）；
allpath.forEach（elem=>elem.style.fill=“#f2f2”）；
});
开始游戏
请点击
我不确定您对文本框的意思（我在您的代码中看不到类似的内容，而且，国家形状看起来不像框），但SVG元素是可以编写脚本的。我没有添加任何文本框，但我想我可以不添加一些。对这一切都很陌生，所以不确定。嗯，那么也许我可以在if语句中使用事件处理程序？是的，您当然可以添加
或
元素，并使用一些精心制作的CSS将它们放置在映射的顶部。但是：1）文本框是矩形的，国家不是2）文本框只允许输入，元素不允许输入。请注意，我们没有您需要的上下文，您确实需要解释如何使用这些文本框。谢谢！有道理。只是不知道Javascript DOM操作和这个关键字是否正确。@Mathlearner我在第一条评论中直截了当地说“SVG元素是可编写脚本的。您可以像处理HTML一样附加事件处理程序”。我显然没有说清楚，但我很乐意澄清任何疑问。@阿尔瓦罗冈萨雷斯是的，对不起。我真的不知道那是什么意思。我应该问的。
<path
     inkscape:connector-curvature="0"
     id="Algeria"
     onmouseover="displayName('Algeria')"
     onclick="onClickHandler(this)"

var items = Array("Afghanistan", "Algeria", "Australia", "Ecuador", "Bahrain", "Bhutan");

function shuffle(array){
   var currentIndex = array.length, temporaryValue, randomIndex;
   while(0 !== currentIndex){
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
   }

   return array;
}

function nextQuestion(){
   items = shuffle(items);
   objQ = items[0];
   return objQ;

}


var e; //event
var i; //index counter

// Aim to try and put hidden text box on each answer and if the array matches the clicked area highlight it white.

function checkAnswer(){
   for(i = 0; i < items.length; i++){
       if(document.getElementById('ansfield').value  == onClickHandler(this)){
         onClickHandler(this).fill = "white";    
// don't think this is correct. 
//Trying to get it to turn the country 
//with the matched name to the array white.  
//Probably need some sort of onclick event...
}
   }
}