為什么我不能為數組設置css屬性。 Hangman Javascript的編碼

Question

為什么character.setAttribute（）無法工作。 如果刪除該行，則可以找到我要完成的內容的格式，但是字母的CSS不會使其不可見。 如果我確實將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

TextNode沒有屬性。

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

我猜你想做：

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

工作示例：

 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