Question

我的javascript无法按照我想要的方式工作。我有一个文本框和一个progresbar。 javascript必须从文本框中读取字符串（TbProd1）并查看它是哪个字符串。每个字符串在progresbar中都有不同的值（25％，50％和100％）。

文本框有3种不同的选项： 1：Vrijgegeven 2：Gepicked 3：Voltooid

脚本不会比较我的文本框字符串。有人能找到我的错误吗？

这是我的代码：

    <script>
        function move1() {
            var textarea1 = document.getElementById('TbProd1');

            var word1 = "Vrijgegeven";
            var word2 = "Gepicked";
            var word3 = "Voltooid";

            var textValue = textarea1.value; 

              if (textValue == (word1)) {

                var elem = document.getElementById("myBar");
                var width = 10;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 25) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word2)) {                
                var elem = document.getElementById("myBar");
                var width = 25;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 50) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML =    width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word3)) {                
                var elem = document.getElementById("myBar");
                var width = 50;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
     }
</script>

</head>
<body>
    <form id="form1" runat="server">

        <div id="content">
        <div>
            <asp:TextBox ID="TbProd1" runat="server"></asp:TextBox></div>
            <div id="myProgress">
            <div id="myBar">
            <div id="LblProgBar1">0%</div>
            </div>
            </div>
        </div>

    </form>
</body>
</html>

Answer 1

编译后

<asp:TextBox>具有唯一标识符。所以似乎你无法通过TbProd1＆＃39;找到这种控制。尝试使用＆＃34; ClientIDMode＆＃34; =＆＃34;静态＆＃34;第一

<asp:TextBox ID="TbProd1" runat="server" ClientIDMode="Static"></asp:TextBox>

Answer 2

如何将事件与文本框联系起来？代码本身确实有用，所以我想知道TextBox中的ID与你期望的不同或者事件是不是调用move1()函数也不是问题。

    function move1() {
            var textarea1 = document.getElementById('TbProd1');

            var word1 = "Vrijgegeven";
            var word2 = "Gepicked";
            var word3 = "Voltooid";

            var textValue = textarea1.value; 

              if (textValue == (word1)) {

                var elem = document.getElementById("myBar");
                var width = 10;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 25) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word2)) {                
                var elem = document.getElementById("myBar");
                var width = 25;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 50) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML =    width * 1 + '%';
                    }
                }
            }
            else   if (textValue == (word3)) {                
                var elem = document.getElementById("myBar");
                var width = 50;
                var id = setInterval(frame, 10);
                function frame() {
                    if (width >= 100) {
                        clearInterval(id);
                    } else {
                        width++;
                        elem.style.width = width + '%';
                        document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
                    }
                }
            }
     }

    <form id="form1" runat="server">

        <div id="content">
        <div>
            <input type="text" onkeyup="move1()" id="TbProd1" />
            <div id="myProgress">
            <div id="myBar">
            <div id="LblProgBar1">0%</div>
            </div>
            </div>
        </div>

    </form>

Answer 3

试试这个getElementById

var textarea1=document.getElementById('<%=TbProd1.ClientID %>').value;

我认为你的问题解决了这个解决方案

从文本框中的字符串的Javascript无效

3 个答案: