为什么我不能为数组设置css属性。 Hangman Javascript的编码

Question

Why can't character.setAttribute() work. 为什么character.setAttribute（）无法工作。 If you delete the line, the format of what I am trying to accomplish is there, but the CSS for the letters don't make it invisible. 如果删除该行，则可以找到我要完成的内容的格式，但是字母的CSS不会使其不可见。 If I do put the setAttribute() in, the code doesn't work. 如果我确实将setAttribute（）放入，则代码将无法正常工作。

<!Doctype html>
<html lang="en">
<head>
<style>
.hidden {
visibility: hidden;
}
ul {
display: inline;
list-style-type: none;
}

.boxes {
font-size:1.6em;
text-align:center;
width: 10px;
border-bottom: 3px solid black;
margin: 5px;
padding: 10px;
display: inline;
}
</style>
</head>
<body>
<script>

var possibleWord = ["cow", "better", "harder", "justify", "condemn", 
"control", "hello", "understand", "life", "insight","date", "righteous"];
var hangmanWord = possibleWord[Math.floor(Math.random() * 
possibleWord.length)];
var underlineHelp;
var space;
var guess;
var guesses = [];
var placement;
var underscores;
var character = [];
window.onload = function () {
placement = document.getElementById('hold');
underlineHelp = document.createElement('ul');
placement.appendChild(underlineHelp);
for (i = 0; i < hangmanWord.length; i++) {
underscores = document.createElement('li');
underscores.setAttribute('class', 'boxes');
guesses.push(underscores);
underlineHelp.appendChild(underscores);
character = document.createElement('li');
character = document.createTextNode(hangmanWord[i]);
character.setAttribute('class', 'hidden');//The issue is here, if you take 
//this line out then the format will be correct, except I am trying to hide 
//the letters with the css attribute "hidden."The dashes are represented by 
//the bottom-border of "boxes." 
underscores.appendChild(character);
}
</script>
<div id = "hold"></div>
</html>

Answer 1

A TextNode doesn't have attributes. TextNode没有属性。

character = document.createElement('li');
character = document.createTextNode(hangmanWord[i]);

I am guessing you want to do: 我猜你想做：

character = document.createElement('span');
character.appendChild(document.createTextNode(hangmanWord[i]));
character.classList.add('hidden');
underscores.appendChild(character);

Working example: 工作示例：

 var possibleWord = ["cow", "better", "harder", "justify", "condemn", "control", "hello", "understand", "life", "insight", "date", "righteous" ]; var hangmanWord = possibleWord[Math.floor(Math.random() * possibleWord.length)]; var underlineHelp; var space; var guess; var guesses = []; var placement; var underscores; var character = []; window.onload = function() { placement = document.getElementById('hold'); underlineHelp = document.createElement('ul'); placement.appendChild(underlineHelp); for (i = 0; i < hangmanWord.length; i++) { underscores = document.createElement('li'); underscores.setAttribute('class', 'boxes'); guesses.push(underscores); underlineHelp.appendChild(underscores); character = document.createElement('span'); character.appendChild(document.createTextNode(hangmanWord[i])); character.classList.add('hidden'); underscores.appendChild(character); } }

  .hidden { visibility: hidden; } ul { display: inline; list-style-type: none; } .boxes { font-size: 1.6em; text-align: center; width: 10px; border-bottom: 3px solid black; margin: 5px; padding: 10px; display: inline; }

  <div id="hold"></div>

为什么我不能为数组设置css属性。 Hangman Javascript的编码

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-24 23:07:09

为什么我不能为数组设置css属性。 Hangman Javascript的编码

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-24 23:07:09

解决方案1
0 已采纳 2018-04-24 23:07:09