Question

所以我正在尝试制作一个网页，根据您的选择生成不同的卡片。

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

<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>

这是我正在使用的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);
}

 });

所以我试图将页面设置为当我点击普通按钮时，它根据所选的单选按钮显示我所拥有的那种卡。因此，如果我选择“Ace”单选按钮，我希望它采用该单选按钮并通过getRank函数运行它，然后在我选择Deal Card按钮后显示结果。谁能告诉我我做错了什么？因为当我点击交易按钮时没有任何反应。

Answer 1

我认为主要原因不是缺少某些东西，而是 radio 元素的错误用法。也就是说，您必须使用相同的名称属性命名它们，例如 rank ，并且每当 DON NOT 给予任何两个或更多元素相同 id 属性。顺便说一下，比较两件事的更好方法是使用索引。

总之，我做了一些改变如下：

已移除 id 属性。
将广播的所有名称属性替换为排名。
将 querySelector 的参数设置为“input [name = rank]：checked”。
在未选择任何内容时为输入值提供默认值。
通过 1 传递交易卡号是指 ACE 的索引。你可以随意改变它。

检查并告诉我它是否适合你。

<input type="radio" name="rank" value="1"/> Ace
<input type="radio" name="rank" value="2"/> 2
<input type="radio" name="rank" value="3"/> 3<br>
<input type="radio" name="rank" value="4"/> 4

<button id="btn1">Deal the Card</button>

{{1}}

Answer 2

您的代码存在编译问题，因为您在}函数中缺少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();
      });
 });

JSON和单选按钮输入？

2 个答案: