2010-09-23 189 views
1

我想改变js函数中标签的innerHtml属性来更新值。我似乎无法像预期那样完成这项工作,任何投入都会很棒!改变.innerHtml属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>D&D Attribute Generator</title> 
     <link rel=stylesheet type="text/css" href="/style.css"> 
     <script type="text/javascript"> 
      function roll() 
      { 
       var str = document.getElementById("strTB").value; 
       var dex = document.getElementById("dexTB").value; 
       var con = document.getElementById("conTB").value; 
       var intt = document.getElementById("intTB").value; 
       var wis = document.getElementById("wisTB").value; 
       var cha = document.getElementById("chaTB").value; 

       var array = [str || 0, dex || 0, con || 0, intt || 0, wis || 0, cha || 0]; 

       var results = new Array(); 
       var index = -1; 
       var rollCount = 0; 
       var i = 0; 
       var len = array.length; 
       for(i=0; i < len; i++) 
       { 
        var rollVal = Math.floor(Math.random() * 20 + array[i]) 
        while (rollVal < array[i]) 
        { 
         rollVal = Math.floor(Math.random() * 20 + array[i]) 
         i = 0; 

        } 
        results[i] = array[i]; 

       } 
       document.getElementById("strLbl").innerHtml = "test"; 

       /*document.getElementById("dexLbl").innerHtml = ""+ results[1]; 
       document.getElementById("conLbl").innerHtml = ""+ results[2]; 
       document.getElementById("intLbl").innerHtml = ""+ results[3]; 
       document.getElementById("wisLbl").innerHtml = ""+ results[4]; 
       document.getElementById("chaLbl").innerHtml = ""+ results[5];*/ 
       alert(document.getElementById("strLbl")); 
       return (false); 
      } 
     </script> 

    </head> 
    <body> 
     <div id="mainDiv"> 
      <div id="headTrans"></div> 
      <div id="headBox"> 
       <h1>D&D Attribute Generator</h1> 
      </div> 
      <div id="bodyTrans"></div> 

       <div id="BodyBox"> 
        <table id="formTbl" cellpadding="5px"> 
          <tr> 
           <th>Attribute</th> 
           <th>Min Value</th> 
           <th>Exc %</th> 
          </tr> 
          <tr> 
           <td>Strength</td> 
           <td id="minValCell"><input type="text" id="strTB" maxlength="2" size="3" /></td> 
           <td id="minValCell"><input type="text" id="strExcTB" maxlength="2" size="3" /></td> 
          </tr> 
          <tr> 
           <td>Dexterity</td> 
           <td id="minValCell"><input type="text" id="dexTB" maxlength="2" size="3" /></td> 
          </tr> 
          <tr> 
           <td>Constitution</td> 
           <td id="minValCell"><input type="text" id="conTB" maxlength="2" size="3" /></td> 
          </tr> 
          <tr> 
           <td>Intelligence</td> 
           <td id="minValCell"><input type="text" id="intTB" maxlength="2" size="3" /></td> 
          </tr> 
          <tr> 
           <td>Wisdom</td> 
           <td id="minValCell"><input type="text" id="wisTB" maxlength="2" size="3" /></td> 
          </tr> 
          <tr> 
           <td>Charisma</td> 
           <td id="minValCell"><input type="text" id="chaTB" maxlength="2" size="3" /></td> 
           <td><b><input type="button" id="rollBtn" value=" Roll " onclick="return roll()" /></b></td> 
          </tr> 
         </table> 
         <hr size="2" width="85%"> 
         <h2>Results</h2> 
         <label id="strLbl">Strength: </label><br> 
         <label id="dexLbl">Dexterity: </label><br> 
         <label id="conLbl">Constitution: </label><br> 
         <label id="intLbl">Intelligence: </label><br> 
         <label id="wisLbl">Wisdom: </label><br> 
         <label id="chaLbl">Charisma: </label><br> 
       </div> 
       <div id="rollCountBox"><label id="rollCountLbl">Roll Count: 0</label></div> 
     </div> 
    </body> 
</html> 

回答