个人中心
gpt4 book ai didi

javascript - 如何将 html 中的文本内容更改为从 Javascript 中随机生成的值？

转载 作者：太空宇宙 更新时间：2023-11-04 06:01:50 25 4
gpt4 key购买 nike

我在为一个小元素编码时遇到问题。基本上，我正在尝试制作一个翻转框，当用户点击它时，它会显示它是否是数组中提到的任何 super 英雄。请看一下这支代码笔以了解它:https://codepen.io/zakero/pen/YmGmwK .

当我使用 alert() 时，代码可以完美运行，正如您在代码笔中看到的那样。每次单击方 block 时它都会随机化。但我希望在点击和翻转后显示结果。我的意思是不是“返回”，而是 super 英雄的随机名称。我都尝试过 .textContent 和 .innerHTML 来改变它，但它似乎不起作用这是我试过的代码:

Javascript:

function setupSquares() {
    for(var i = 0; i < frontSquare.length; i++) {
        frontSquare[i].addEventListener("click", function() {
            var randomNumber = frontSquare[i] = generateRandomNumbers(numbers);
            for(var j = 0; j < superhero.length; j++) {
                var index = superhero.indexOf(superhero[j]);
                if(randomNumber === index){
                    backSquare.textContent = superhero[j];
                }
            }

        });
    }
}

var superhero = ["Ironman", "Superman", "Batman", "Spiderman", "Black Panther", "Hawkeye", "Hulk", "Captain America", "Thor", "Quicksilver", "Loki"];
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var frontSquare = document.querySelectorAll(".front");
var backSquare = document.querySelectorAll(".back");


init();

function init() {
  setupSquares();
}

function generateRandomNumbers(num) {
  var random = Math.floor(Math.random() * num.length + 1);
  return random;
}

function setupSquares() {
  for (var i = 0; i < frontSquare.length; i++) {
    frontSquare[i].addEventListener("click", function() {
      var randomNumber = frontSquare[i] = generateRandomNumbers(numbers);
      for (var j = 0; j < superhero.length; j++) {
        var index = superhero.indexOf(superhero[j]);
        if (randomNumber === index) {
          alert(superhero[j]);
        }
      }

    });
  }
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #96CEB4;
  font-family: Open Sans;
  font-size: 50px;
  color: #222;
}

#container {
  margin: 37px auto;
  max-width: 1000px;
  background: #96CEB4;
  height: 550px;
  overflow: hidden;
}

.square {
  width: 30%;
  padding-top: 35px;
  margin: 1.66%;
  float: left;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
  height: 200px;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  cursor: pointer;
  /*border-radius: 50px;*/
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 600ms;
  transition: all 600ms;
  z-index: 20;
}

.card div {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #FFEEAD;
  text-align: center;
  line-height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card .back {
  background: #FF6F69;
  color: #FFF;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

label:hover .card {
  -webkit-transform: rotateX(20deg);
  transform: rotateX(20deg);
  box-shadow: 0 20px 20px rgba(50, 50, 50, .2);
}

input {
  display: none;
}

:checked+.card {
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}

label:hover :checked+.card {
  transform: rotateX(160deg);
  -webkit-transform: rotateX(160deg);
  box-shadow: 0 20px 20px rgba(255, 255, 255, .2);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <title>Flip Box</title>
</head>

<body>

  <div id="container">
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
    <label class="square">
		    <input type="checkbox"/>
		    <div class="card">
		        <div class="front">Front</div>
		        <div class="back">Back</div>
		    </div>
		</label>
  </div>






  <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

最佳答案

您可以使用以下方法点击 .front 的 .back:

this.parentNode.querySelector('.back').innerText = superhero[j];

你看，对于你的情况，你错过了很多东西。首先 backSquare 是一个数组，因此您必须访问要从中修改的元素。代替 backSquare.textContent = superhero[j];，使用 backSquare[i].innerText = superhero[j]，它允许您访问相同的 i- th backSquare 作为 frontSquare。但请注意，这不会起作用，因为您在循环变量中使用 var i = ... 并且 var 不会在循环上创建闭包。所以要解决这个问题，您可以将 var 更改为 let。

这里有更多相关信息:Closures versus ES6 Let

或者，您可以使用 this 来引用当前被单击的元素。 this 由使用 addEventListener 函数点击的当前元素填充。

关于这个的更多信息:https://codeburst.io/all-about-this-and-new-keywords-in-javascript-38039f71780c

演示:https://codepen.io/anon/pen/JgbPEK

关于javascript - 如何将 html 中的文本内容更改为从 Javascript 中随机生成的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57223227/

25 4 0
文章推荐： python - 如何使用Python脚本在Linux上启动应用程序？
文章推荐： javascript - 使用 Flask : Method Not Allowed error 405 在 Javascript 和 Python 之间调用
文章推荐： linux - 用于查找和替换并进行确认的 Shell 脚本
文章推荐： Python stream.tell() 返回不正确的位置
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com