隐藏的 p 元素不会在刽子手游戏中保持不变答案

【问题标题】：hidden p elements not staying fixed in a hangman game隐藏的 p 元素不会在刽子手游戏中保持不变
【发布时间】：2014-10-09 05:42:27
【问题描述】：

我是 javascript、css 和 html 的初学者。我正在使用这三种语言创建一个简单的刽子手游戏。我遇到的问题是，当我开始转向内联 p 标签的显示属性（包含单词的组成字母）时，字母不会保持它们的位置。例如，如果正在猜测单词 'clouds' 并且正确猜测了 c 和 o 字母，则结果将显示为 "c o _ _ _ _" 而不是 "c _ o _ _ s" 。正确猜出最后一个字母后，该单词会正常显示，但之前不会出现。如果我无法显示尚未选择的字母的正确位置，但我似乎无法找出问题所在，那么这种情况就会使刽子手失去意义。我的代码流程是这样的。我有四个功能：

createAlphabets() 列出要选择的字母网格。
selectWord() 函数用于选择单词。
displayWord() 函数创建 p 个元素，这些元素包含上述所选单词的字母，并且它们的显示属性设置为“无”。
点击任意字母时调用clickLetter()函数，并将该字母与所选单词中的字母进行比较，并将包含该字母的p元素的显示属性设置为“排队”。

这是我的代码：

HTML：

    <body>
      <div id="container">
      <div id="hangman">
      <div id="stand"></div>
      <div id="face"></div>
      <div id="body"></div>
      <div id="left-arm"></div>
      <div id="right-arm"></div>
      <div id="left-leg"></div>
      <div id="right-leg"></div>

      </div>

    <div id="alphabet">

    </div>
    <div id="gameOver"><p>Game Over!<br>PS: I am not "actually" being hanged</p>
    </div>
<div id="beingGuessedWord"></div>

CSS：

      #container {
         height:450px;
         width:600px;
         border:2px solid grey;
         border-radius:5px;
         background-color:hsla(115, 100%, 16%, 1);
         position:relative;  

         }

        #stand {

        background-image:url('http://i59.tinypic.com/sbll48.png');
        height:220px;
        width:200px;

       }

        #face {
        background-image:url('http://i59.tinypic.com/6dx0ee.png');
        height:60px;
        width:60px;
        position:relative;
        top:-175px;
        left:155px;
        visibility:hidden;  



        }

        #body {
        background-image:url('http://i61.tinypic.com/27ywcg.png');
        background-repeat: no-repeat;
        position:relative;
      height:50px;
      top:-175px;
      left:155px;
      visibility:hidden;  

      }

      #left-arm {
      background-image:url('http://i58.tinypic.com/2evvvac.png');
      background-repeat: no-repeat;
      position:relative;
      height:70px;
      width:40px;
      top:-240px;
      left:150px;
      visibility:hidden;  


      }

     #right-arm{
     background-image:url('http://i58.tinypic.com/vfuhyp.png');
     background-repeat: no-repeat;
     position:relative;
     height:70px;
     width:40px;
     top:-300px;
     left:190px;
     visibility:hidden;  

     }

     #left-leg{
     background-image:url('http://i57.tinypic.com/t4u5na.png');
     background-repeat: no-repeat;
     position:relative;
     height:60px;
     width:60px;
     top:-335px;
     left:135px;
     visibility:hidden;  

     }

    #right-leg{
    background-image:url('http://i61.tinypic.com/2dqplzb.png');
    background-repeat: no-repeat;
    position:relative;
    height:50px;
    width:60px;
    top:-385px;
    left:180px;
    visibility:hidden; 

    }

    #alphabet {
    height:100px;
    width:250px;
    position:relative;
    top:-450px;
    left:300px;
    text-align:center;

    }

    #alphabet a {
    font-size:20px;
    text-decoration:none;
    margin:5px;
    font-family: 'Crafty Girls', cursive;
    font-weight:bold;
    color:grey;

    }

    #beingGuessedWord {
    height:70px;
    width:300px;
    position:relative;
    top:-500px;
    left:80px;
    padding-top:50px;

    }

   .letterp {
    border:2px solid black;
    font-family:"Crafty Girls", cursive;
    font-size:20px;
    margin:10px;
    font-weight:bold;
    padding:5px;
    border-radius:5px;


    }

   #dash {
   padding:5px;
   margin:5px;
   font-weight:bold;
   font-family:serif;

  }

  #gameOver {
  border:3px solid grey;

  font-family:'Crafty Girls', cursive;
  font-size:15px;
  font-weight:bold;
  position:relative;
  top:-670px;
  left:300px;
  height:70px;
  width:280px;   
  border-radius:5px;
  text-align:center;   
  visibility:hidden;      

 }

JavaScript

var totalIncorrectClicks = 0;//Global variable

var clickLetter = function() {


  var clickedLetter = document.getElementById(this.id);  
  var word = clickedLetter.getAttribute("data-word");


    var compareSuccess = false;
    for (var i = 0; i < word.length; i++) {

      if (word[i] == clickedLetter.innerHTML) 
      {

          var pId = "id" + word[i];

          var pNode = document.getElementById(pId);
          pNode.style.display = "inline";
          compareSuccess = true;

      }

    }

    if (compareSuccess == false)
    {
        totalIncorrectClicks++;
    }

    if (compareSuccess == false && totalIncorrectClicks <=7)
    {
        if (totalIncorrectClicks == 1)
        {
        var face = document.getElementById('face');
        face.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 2)
        {
        var body = document.getElementById('body');
        body.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 3)
        {
        var leftArm = document.getElementById('left-arm');
        leftArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 4)
        {
        var rightArm = document.getElementById('right-arm');
        rightArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 5)
        {
        var leftLeg = document.getElementById('left-leg');
        leftLeg.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 6)
        {
        var rightLeg = document.getElementById('right-leg');
        rightLeg.style.visibility = "visible";
        }

        if (totalIncorrectClicks == 7)
        {
            var gameOver = document.getElementById('gameOver');
            gameOver.style.visibility = "visible";
        }
    }


}

var createAlphabets = function () {
  var alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

for (var i = 0; i < alphabets.length; i++)
  {
    var anchorNode = document.createElement('a');
    var idanch = "id" + (i+1);


    anchorNode.setAttribute('id', idanch);


    anchorNode.innerHTML = alphabets[i];

    anchorNode.setAttribute('href', "#");


    var alphaDiv = document.getElementById('alphabet')

    alphaDiv.appendChild(anchorNode);

    if (i == 11 || i == 22)
      {
        alphaDiv.innerHTML = alphaDiv.innerHTML + "<br>"

      }


  }
}

var selectWord = function() {

  var wordArray = ["air", "clouds", "sun"];
  var randomWord = wordArray[Math.floor(Math.random() * wordArray.length)];
  var splitRandomWord = randomWord.split('');

  return splitRandomWord;

}


var displayWord  = function(word) {


  for (var i = 0; i < word.length; i++) {


    var dispWordDiv = document.getElementById('beingGuessedWord');


    var pNode = document.createElement('p');

    pNode.innerHTML = word[i];
    var id = "id" + word[i];
    pNode.setAttribute('id', id);
    pNode.setAttribute('class', "letterp");  
      pNode.style.display = "none";

    dispWordDiv.appendChild(pNode);

  }

  var dispWordDiv  = document.getElementById('beingGuessedWord');
  dispWordDiv.innerHTML = dispWordDiv.innerHTML + "<br>"; 

  for (var i = 0; i < word.length; i++) {
      var dispWordDiv  = document.getElementById('beingGuessedWord');
      var empty = document.createElement('p');
      empty.setAttribute('id', 'dash');
      empty.innerHTML = "___";
      empty.style.display = "inline";



    dispWordDiv.appendChild(empty);
  }
  }

  var word = selectWord();
  createAlphabets();
  displayWord(word);
  for (var i = 0; i < 27 ; i++) {
  var id = "id" + ( i + 1 );
  var anchor  = document.getElementById(id);
  anchor.setAttribute('data-word', word);    
  anchor.onclick = clickLetter;
}

http://jsfiddle.net/h_i_r_a/5rtwed1d/9/

谢谢！

【问题讨论】：

如果您学会为您选择的浏览器使用开发人员工具，您作为 Web 开发人员的生活将会轻松得多。当我查看使用 Firebug 时，很明显发生了什么。试一试！它对调整布局、调试 JavaScript 等有很大帮助。
我最近开始使用它们，我确实尝试看看出了什么问题，但对我来说不是很明显，我猜几乎是初学者:) p 元素以正常顺序出现，所以我想只是将显示选项打开到内联应该可以正常工作，你是怎么弄清楚的？
查看 HTML，当单击一个字母时，我看到该字母的 p 元素变得可见，但视觉上位于错误的位置。对我来说很明显前面的 p 元素不在流程中。我想是经验使这一点变得显而易见，但该工具向我展示了这一点。顺便说一句，如果你得到一个包含重复字母的单词，你的算法就会出现问题。由于您使用字母来创建元素的 ID，因此您会得到重复。
感谢您指出重复字母的问题。在您指出之后，我已经尝试了一段时间来解决这个问题，但我无法弄清楚。我想我会在一个单独的线程中发布以寻求帮助。谢谢！

标签： javascript html css

【解决方案1】：

好吧，当你显示一个隐藏元素时，浏览器会在页面最左边的可用边缘显示它...（因为默认方向是左侧）

如果我是你，我会创建一个这样的表格

<table>
 <tr>
  <td> 1st hidden char </td>
  <td> 2nd hidden char </td>
  ...
  <td> Nth hidden char</td>
 </tr>
 <tr>
  <td> 1st underline _ </td>
  <td> 2nd underline _ </td>
  ...
  <td> Nth underline _ </td>
 </tr>
</table>

（甚至对于每个单词都是动态的）所以当你显示一个隐藏的元素时，它会显示在它的位置:)

希望对你有帮助

【讨论】：

谢谢！听起来是一种非常巧妙的方法，我也试试这个！

【解决方案2】：

问题在于你的方式。您将 p 的样式设置为 'display:none' 以使其不可见。您应该改用“可见性：隐藏”。如果你让它不显示，那么它会表现得好像它不存在一样。但是如果你使用可见性属性，它会表现得像它存在但不可见

http://jsfiddle.net/5rtwed1d/11/

if (word[i] == clickedLetter.innerHTML) 
  {

      var pId = "id" + word[i];

      var pNode = document.getElementById(pId);
      pNode.style.visibility = "visible";
      compareSuccess = true;

  }

【讨论】：

啊哈！我确实尝试过这个，但是当我使用可见性使所有字母出现在块中时，我并没有将显示设置为内联（就像你所做的那样）。谢谢，这行得通！