简体   繁体   English

更改.innerHtml属性

[英]changing .innerHtml Property

I am trying to changed the innerHtml property of a label in a js function to update values. 我正在尝试在js函数中更改标签的innerHtml属性以更新值。 I cannot seem to make this work as anticipated, any input would be great! 我似乎无法像预期的那样完成这项工作,任何投入都是很棒的!

<!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>

.innerHTML needs to be capitalized. .innerHTML需要大写。 You can view an example here: http://jsfiddle.net/fTF8m/ 您可以在此处查看示例: http : //jsfiddle.net/fTF8m/

MDC: https://developer.mozilla.org/en/dom:element.innerhtml MDC: https//developer.mozilla.org/en/domelement.innerhtml

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM