[英]How can I change the text content in html to a randomly generated value from Javascript?
我在为一个小项目编码时遇到问题。 基本上，我正在尝试制作一个翻转框，当用户单击该翻转框时，该翻转框将向他显示是否有数组中提到的任何超级英雄。 请看一下这支密码笔以了解它： https : //codepen.io/zakero/pen/YmGmwK 。
如您在代码笔中所见，当我使用alert（）时，代码可以完美运行。 每次单击一个正方形时，它将随机化。 但我希望单击并翻转结果后才能显示结果。 我的意思是希望它不是超级英雄的随机名称，而不是“ Back”。 我都尝试过.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的.front ：
this.parentNode.querySelector('.back').innerText = superhero[j];
对于您的情况，您会看到丢失了很多东西。 首先， backSquare是一个数组，因此您必须从中访问要修改的元素。 代替backSquare.textContent = superhero[j]; ，请使用backSquare[i].innerText = superhero[j] ，它允许您访问与backSquare相同i-th frontSquare 。 但是要小心，这将不起作用，因为您在循环变量中使用了var i = ... ，并且var不会在循环中创建闭包。 因此，要解决此问题，您可以将var更改为let 。
有关此内容的更多信息： 闭包与ES6 Let
或者，您可以使用this来引用当前被单击的元素。 this是通过用addEventListener函数单击的当前元素填充的。
有关this更多信息： https : //codeburst.io/all-about-this-and-new-keywords-in-javascript-38039f71780c
您也可以像这样this.closest('.card').querySelector('.back').textContent = superhero[j]
使用 javascript 随机生成密码后，如何将文本值重置为空字符串
[英]How Can I reset the Text value to an empty string after I've randomly generated a password with javascript
如何从 PHP 生成的 div 中获取值并使用 Javascript 然后更改进度条 HTML5 元素的宽度？
[英]How can I grab a value from a PHP generated div and use Javascript to then change the width of a progress bar HTML5 element?
如何在运行时动态更改javascript生成的hss的css？
[英]How can I dynamically change css for html that is generated by javascript at runtime?
如何使随机生成的结果（javascript）成为超链接？
[英]How can I make randomly generated result (javascript) be a hyperlink?
JavaScript修改DOM中的文本内容后如何改回原来的值
[英]How can I change back the original value after modifying the text content in DOM with JavaScript
如何更改原生 Javascript 上的 HTML 元素的内容？
[英]How can I change the content of HTML elements on native Javascript?
如何使用JavaScript更改内部HTML var值文本的颜色？
[英]How can I change the color of inner HTML var value text with JavaScript?
如何为表单中的文本字段设置初始值？ 此值是从javascript函数生成的。 没有botton的情况下如何定义事件？
[英]How to set a initial value for a text field in a form? This value is generated from a javascript function. How can i define the event without botton?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.