在div元素中顯示信息

我不知道我是否正在做這件事，但我試圖在腳本循環後顯示錶中的總數，我一直在這個網站上搜索幾天，但沒有有幸運。這裏是我的代碼： HTML：在div元素中顯示信息

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <script src="script.js" type=J AVASCRIPT></script> 
 
</head> 
 

 
<body> 
 
    Number of simulations: 
 
    <input type="textbox" id="loops"> 
 
    <br> 
 
    <br> 
 
    <input type="button" value="Play" id="play" onClick="simulate()"> 
 
    <br> 
 
    <br> 
 
    <table border="Thick"> 
 
    <tr> 
 
     <td></td> 
 
     <td>Wins</td> 
 
     <td>Percentage</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Player</td> 
 
     <td> 
 
     <div id="playWins" value="test"></div> 
 
     </td> 
 
     <td> 
 
     <div id="playPercent"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Computer</td> 
 
     <td> 
 
     <div id="comWins"></div> 
 
     <td> 
 
      <div id="comPercent"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ties</td> 
 
     <td> 
 
     <div id="ties"></div> 
 
     </td> 
 
     <td> 
 
     <div id="tiesPercent"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

的Javascript：

function simulate() { 
 
     var userSelect; 
 
     var comSelect; 
 
     var ties = 0; 
 
     var playWins = 0; 
 
     var comWins = 0; 
 
     var loops; 
 
     var counter = 0; 
 
     loops = document.getElementById("loops").innerHTML; 
 

 
     while (loops > counter) { 
 
     userSelect = new Math.random(); 
 
     if (userSelect < 0.34) { 
 
      userSelect = "rock"; 
 
     } else if (userSelect <= 0.67) { 
 
      userSelect = "paper"; 
 
     } else { 
 
      userSelect = "scissors"; 
 
     } 
 

 
     comSelect = new Math.random(); 
 
     if (comSelect < 0.34) { 
 
      comSelect = "rock"; 
 
     } else if (comSelect <= 0.67) { 
 
      comSelect = "paper"; 
 
     } else { 
 
      comSelect = "scissors"; 
 
     } 
 

 
     if (userSelect == comSelect) { 
 
      ties = ties + 1; 
 
     } else if (((userSelect = "rock") && (comSelect = "scissors")) || ((userSelect = "paper") && (comSelect = "rock")) || ((userSelect = "scissors") && (comSelect = "paper"))) { 
 
      playWins = playWins + 1; 
 
     } else { 
 
      comWins = comWins + 1; 
 
     } 
 
     counter++; 
 
     } 
 

 

 
     //Displaying information in table -- will not work 
 
     document.getElementById("playWins").value = ((playWins).toString()); 
 
     document.getElementById("comWins").value = (comWins).toString(); 
 
     document.getElementById("ties").value = (ties).toString(); 
 
    }

來源

2016-03-30 Kyle Habig

divs沒有值字段。嘗試設置'playWins'，'comWins'和'ties'元素的textContent字段。 – xrgb

'document.getElementById（「playWins」）。value =（（playWins）.toString（））;'......你從哪裏得到這段代碼？ –

我做到了，我知道這可能是不對的。你爲什麼要問？ –

而是使用

document.getElementById("playWins").value

嘗試：

document.getElementById("playWins").textContent

有關如何在一個div寫看MDN（不要使用innerHTML）的更多細節。

要轉換文本號碼，您可以使用：

+document.getElementById("loops").value.trim()

的最好辦法，只是爲了避免從文本到數字的轉換，作爲數字是定義一個輸入框：

<input type="number" id="loops">

溶液可以是：

function simulate() { 
 
    var userSelect; 
 
    var comSelect; 
 
    var ties = 0; 
 
    var playWins = 0; 
 
    var comWins = 0; 
 
    var loops; 
 
    var counter = 0; 
 
    loops = +document.getElementById("loops").value.trim(); 
 

 
    while (loops > counter) { 
 
    userSelect = Math.random(); 
 
    if (userSelect < 0.34) { 
 
     userSelect = "rock"; 
 
    } else if (userSelect <= 0.67) { 
 
     userSelect = "paper"; 
 
    } else { 
 
     userSelect = "scissors"; 
 
    } 
 

 
    comSelect = Math.random(); 
 
    if (comSelect < 0.34) { 
 
     comSelect = "rock"; 
 
    } else if (comSelect <= 0.67) { 
 
     comSelect = "paper"; 
 
    } else { 
 
     comSelect = "scissors"; 
 
    } 
 

 
    if (userSelect == comSelect) { 
 
     ties = ties + 1; 
 
    } 
 
    else if (((userSelect = "rock") && (comSelect = "scissors")) || ((userSelect = "paper") && (comSelect = "rock")) || ((userSelect = "scissors") && (comSelect = "paper"))) { 
 
     playWins = playWins + 1; 
 
    } 
 
    else { 
 
     comWins = comWins + 1; 
 
    } 
 
    counter++; 
 
    } 
 
    //Displaying information in table -- will not work 
 
    document.getElementById("playWins").textContent = playWins.toString(); 
 
    document.getElementById("comWins").textContent = comWins.toString(); 
 
    document.getElementById("ties").textContent = ties.toString(); 
 
}

Number of simulations: <input type="textbox" id="loops"><br><br> 
 
<input type="button" value="Play" id="play" onClick="simulate()"><br><br> 
 
<table border="Thick"> 
 
    <tr> 
 
     <td></td> 
 
     <td>Wins</td> 
 
     <td>Percentage</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Player</td> 
 
     <td> 
 
      <div id="playWins" value="test"></div> 
 
     </td> 
 
     <td> 
 
      <div id="playPercent"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Computer</td> 
 
     <td> 
 
      <div id="comWins"></div> 
 
     <td> 
 
      <div id="comPercent"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ties</td> 
 
     <td> 
 
      <div id="ties"></div> 
 
     </td> 
 
     <td> 
 
      <div id="tiesPercent"></div> 
 
     </td> 
 
    </tr> 
 
</table>

來源

2016-03-30 17:52:07 gaetanoM

這有效，但是當我在我的程序中嘗試它時，沒有顯示任何內容。另外，我在隨機選擇中修正了一個邏輯錯誤。 –

@KyleHabig您是否正確複製了我的代碼段？ – gaetanoM

是的，我做到了。我可能沒有正確指向JavaScript文件？ –

我看到一個錯誤在獲取循環值。嘗試基於以下我的評論此

loops = document.getElementById("loops").value;

更新：

考慮以下變化

userSelect = Math.random(); 
. 
. 
. 
comSelect = Math.random();

而且內容更新值：

document.getElementById("playWins").innerHTML = ...;

來源

2016-03-30 17:39:58 Milan

您可以使用更多信息編輯您的答案，它可能比將其添加爲評論更有用。 – DBS

謝謝@DBS。我是新手。 :) – Milan

您可以試試這個： document.getElementById（「playWins」）。innerHTML =「您的價值」;

來源

2016-03-30 17:54:24 dutta

在div元素中顯示信息

回答

相關問題