Javascript JSON和单选按钮输入？

因此，我试图制作一个网页，根据您的选择生成不同的卡片

以下是我的一些单选按钮和一个普通按钮：

<form action="">
  <input type="radio" name="Ace" value="1" id="rank"> Ace
  <input type="radio" name="2" value="2" id="rank"> 2
  <input type="radio" name="3" value="3" id="rank"> 3<br>
  <input type="radio" name="4" value="4" id="rank"> 4

  <button id="btn1">Deal the Card</button>

王牌
2.
3

4.
发牌

以下是我正在使用的js代码：

 var getRank = function(x){
var rank = 
'{"1": "Ace", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7", "8": "8", "9": "9", "10": "10",\
  "11": "Jack", "12": "Queen", "13": "King"}'
var rank = JSON.parse(rank)

return rank[x]
}

 var dealCard = function(){
     var input = (document.querySelector("#rank").value)
     var input2 = (document.querySelector("#suit").value)

     if (input === rank[i])
        return getRank(input)

 var main = function() {

console.log(this.id);

if (this.id == "btn1")
{   
    dealCard()
}

  };

  window.addEventListener("load", function() {

//select the buttons
var buttons = document.querySelectorAll("button");

//register the same handler for each button
for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", main);
}

 });

var getRank=function（x）{
变量秩=
“{”1:“Ace”，“2:“2”，“3:“3”，“4:“4”，“5:“5”，“6:“6”，“7:“7”，“8:“8”，“9:“9”，“10:“10”\
“11:“杰克”，“12:“女王”，“13:“国王”}”
var rank=JSON.parse（rank）
返回等级[x]
}
var dealCard=函数（）{
var输入=（document.querySelector（“#rank”）.value）
var input2=（document.querySelector（“#suit”）.value）
如果（输入===秩[i]）
返回getRank（输入）
var main=函数（）{
console.log（this.id）；
如果（this.id==“btn1”）
{   
dealCard（）
}
};
addEventListener（“加载”，函数（）{
//选择按钮
var buttons=document.queryselectoral（“按钮”）；
//为每个按钮注册相同的处理程序
对于（变量i=0；i

---

因此，我试图将页面设置为当我单击“普通”按钮时，它会根据选择的单选按钮显示我拥有的卡的类型。因此，如果我选择“Ace”单选按钮，我希望它获取该单选按钮并通过getRank函数运行它，然后在我选择“交易卡”按钮后显示结果。有人能告诉我我做错了什么吗？因为现在我单击“交易”按钮时不会发生任何事。

您的代码有编译问题，因为您缺少

}

在

dealCard

函数中用括号括起来，并在注释中提到，您甚至在定义

rank

之前就试图访问它

var rank = 
'{"1": "Ace", "2": "2", "3": "3", "4": "4", "5": "5", "6": "6", "7": "7", "8": "8", "9": "9", "10": "10",
  "11": "Jack", "12": "Queen", "13": "King"}';

var getRank = function(x){

   rank = JSON.parse(rank);

   return rank[x];
}

 var dealCard = function(){
     var input = document.querySelector('input[id="rank"]:checked').value;
     //call the getRank with clicked
     return getRank(input);

 } //you had missed this.

 window.addEventListener("load", function() {

     document.getElementById("btn1").addEventListener("click", function(){ 
         dealCard();
      });
 });

---

我认为主要原因并不是遗漏了什么，而是错误地使用了radio元素。也就是说，您必须使用相同的名称属性（如秩）来命名它们，并且每当不给任何两个或以上的元素赋予相同的id属性时。顺便说一句，比较两件事的更好方法是使用索引

综上所述，我做了如下改变：

已删除id属性

将radios的所有name属性替换为rank

将querySelector的参数设置为“input[name=rank]：checked”

未选择任何内容时，为输入值提供默认值

通过交易卡号1表示ACE的索引。你可以随意改变它

检查一下，告诉我它是否适合你

var-rank='{“1”：“Ace”，“2”：“2”，“3”：“3”，“4”：“4”，“5”：“5”，“6”：“6”，“7”，“8”：“8”，“9”：“9”，“10”：“10”，“11”：“杰克”，“12”：“女王”，“13”：“国王”}；
rank=JSON.parse（rank）；
var getRank=函数（x）{
返回秩[x]；
}
var dealCard=功能（i）{
var input=document.querySelector（“input[name=rank]：选中”）；
input=input==null？'1'：input.value；
//var input2=document.querySelector（“#rank-2”）.值；
如果（输入==i）
返回getRank（输入）
}
var main=函数（）{
如果（this.id==“btn1”）{
console.log（dealCard（“1”）；//将参数更改为索引。
}
}
addEventListener（“加载”，函数（）{
//选择按钮
var buttons=document.queryselectoral（“按钮”）；
//为每个按钮注册相同的处理程序
对于（变量i=0；i
Ace
2.
3

4.
处理卡
，这样您就不会得到控制台日志输出了？这似乎也是一个范围问题。在dealCard函数中，
rank[i]
来自何处。查看您的控制台，看看发生了什么。
if（input===rank[i]）
在定义之前使用
rank
，因此我将其切换到if（input==getRank（x）），在控制台上运行时，它显示第一个输入变量给定了一个值，可以是1、2、3等，但随后表示x已定义。我在哪里以及如何定义它？如果不是x，那么函数要将输入与getRank函数进行比较，输入应该等于什么？因此，我将其切换为If（input===getRank（x）），在控制台上运行时，它显示第一个输入变量给定了一个值，可以是1、2、3等，但随后表示定义了x。我在哪里以及如何定义它？如果不是x，那么函数将输入与getRank函数进行比较时，输入应该等于什么？尝试此操作后，它只会显示“位置1处JSON中的意外标记”也会显示“object object”@user2951723 try updated answer。我已经完全重构了你的代码。