时间戳

首页 > 解决方案 > 如何编写函数结果

javascript - 如何编写函数结果

问题描述

我正在制作摇滚、纸、剪刀游戏，现在我正在尝试将结果打印在 h1 元素中。使用提供的代码，我该怎么做？我的问题是我不知道如何使函数的结果成为<h1>元素。现在结果返回一个基本<p>元素。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  
  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>Rock Paper Scissors</title>
  
  <!--  Styles  -->
  <link rel="stylesheet" href="styles/index.css">
</head>
<body>
    <h1 id="winner"></h1>
  <input type = "image" onclick="rockSelec()" class="button" src="images/rock.png"></input>
 <input  type = "image" onclick="scisSelec()" class="button" src="images/paper.png"></input>
  <input type = "image" onclick="paperSelec()" class="button" src="images/sci.png"></input>
  
  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

style.css

body {
    background: #f5f5f5;
  }
  input {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: black;
  }

index.js

var rock = "Rock";
var paper = "Paper";
var scissors = "Scissors";
var ai = Math.random()*2;
var aib = Math.floor(ai);
var aia;
switch (aib) {
  case 0:
    aia = "Rock";
    break;
  case 1:
    aia = "Paper";
    break; 
  case 2:
    aia = "Scissors";
}
function rps(p1, p2) {
    var win2 = "The winner is p2";
    var win1 = "The winner is p1";
    var draw = "It's a draw"
    if (p1 == "Rock" && p2 == "Paper") 
        return win2;
    if (p1 == "Paper" && p2 == "Rock") 
        returrockSelecn1;
    if (p1 == "Rock" && p2 == "Scissors")
        return win1;
    if (p1 == "Scissors" && p2 == "Rock")
        return win2;
    if (p1 == "Paper" && p2 == "Scissors")
        return win2;
    if (p1 == "Scissors" && p2 == "Paper")
        return win1;
    if (p1 == "Paper" && p2 == "Paper" || p1 == "Rock" && p2 == "Rock" || p1 == "Scissors" && p2 == "Scissors" || p1 == "Rock" && p2 == "Rock")
        return draw;
}
var rockResult = rps(rock, aia);
function rockSelec() {
    return document.write(rps(rock, aia))

}
function paperSelec() {
  return document.write(rps(paper, aia))
}
 
function scisSelec() {
  return document.write(rps(scissors, aia))
}

我不想过多地更改我的代码，因为我对我想要的一切有一个固定的想法。

标签： javascripthtmlcssdom

解决方案

如果您想在此处的任何元素之间显示某些内容（h1），您可以使用以下方法。

首先，您需要将 h1 元素引用到 JavaScript 文件，如下所示。

const refer = document.getElementById('winner');

然后，通过使用 innerText 或 innerHTML 属性，您可以将结果添加到 h1 元素。

eg: refer.innerText = <variable name which contains your result >

推荐阅读