Question

我正在尝试结合我有限的HTML和JavaScript知识进行练习，但似乎无法克服这一障碍。我试图做到这一点，所以当我单击按钮时，随机卡片会以按钮上方的形式显示。也许有更好的方法可以做到这一点？

function randomCards() {
  const cards = ['diamond', 'spade', 'heart', 'club'];
  let currentCard = ''
  while (currentCard != 'spade') {
    currentCard = cards[Math.floor(Math.random() * 4)];
  }
}

<form>
  Cards:<br>
  <input type='text' name="Card Slot">
</form>
<button onclick='randomCards()'>Get Cards</button>

Answer 1

您必须将收到的value设置为input。使用document.querySelector获取input元素，然后使用.value设置输入的值

function randomCards() {
  document.querySelector('#a').value = "";
  const cards = ['dimond', 'spade', 'heart', 'club'];
  let currentCard = ''
  while (currentCard != 'spade') {
    currentCard = cards[Math.floor(Math.random() * 4)];
    document.querySelector('#a').value += currentCard +
      " "
  }
}

<form>
  Cards:<br>
  <input type='text' name="Card Slot" id="a">
</form>
<button onclick='randomCards()'>Get Cards</button>

Answer 2

以下是对HTML结构所做的最小更改的答案：

<form>
  Cards:<br>
  <input type='text' name="Card Slot">
</form>
<button onclick='randomCards()'>Get Cards</button>
<script type="text/javascript">
  function randomCards() {
    document.getElementsByName("Card Slot")[0].value = '';
    const cards = ['dimond', 'spade', 'heart', 'club'];
    let currentCard = ''
    while (currentCard != 'spade') {
      currentCard = cards[Math.floor(Math.random() * 4)];
      document.getElementsByName("Card Slot")[0].value += currentCard + ' ';
    }
  }
</script>

Answer 3

function randomCards() {
    const cards = ['dimond', 'spade', 'heart', 'club'];
    let currentCard = ''
    while(currentCard != 'spade') {
        currentCard = cards [Math.floor(Math.random()*4)];
    }
    console.log(currentCard);
    $('#test3').val(currentCard);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form>
  Cards:<br>
  <input type='text' id="test3" name="Card Slot">
</form>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<button onclick= 'randomCards()'>Get Cards</button>
</body>
</html>

此处while(currentCard != 'spade') { currentCard = cards [Math.floor(Math.random()*4)]; }

将始终提供铁锹，如果您想随机使用，可以将其移除并放下currentCard = cards [Math.floor(Math.random()*4)];

如何使用按钮将JavaScript文本打印到表单中

3 个答案: