Question

我正在做一种量规控制。仪表控件需要从文本框中获取值然后进行调整。（也许有一个按钮，但以后就可以了）

问题是我无法从javascript变量中的文本框中获取值。是否有功能或其他东西？

变量是＆＃34; var度＆＃34;现在随机值为250.

这是我的代码：

    <html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">

    <title>Telerik ASP.NET Example</title>
    <link rel="StyleSheet" type="text/css" href="StyleSheet.css" />
    <script>
        window.onload = function () {
            //canvas initialization
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            //dimensions
            var W = canvas.width;
            var H = canvas.height;
            //Variables
            var degrees = 250;
            //var new_degrees = 0;
            var difference = 0;
            var color = "lightgreen";
            var bgcolor = "#222";
            var text;
            var animation_loop, redraw_loop;

            function init() {
                //Clear the canvas everytime a chart is drawn
                ctx.clearRect(0, 0, W, H);

                //Background 360 degree arc
                ctx.beginPath();
                ctx.strokeStyle = bgcolor;
                ctx.lineWidth = 30;
                ctx.arc(W / 2, H / 2, 100, 0, Math.PI * 2, false); //you can see the arc now
                ctx.stroke();

                //gauge will be a simple arc
                //Angle in radians = angle in degrees * PI / 180
                var radians = degrees * Math.PI / 180;
                ctx.beginPath();
                ctx.strokeStyle = color;
                ctx.lineWidth = 30;
                //the arc will start from the topmost end
                ctx.arc(W / 2, H / 2, 100, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);
                ctx.stroke();

                //Lets add the text
                ctx.fillStyle = color;
                ctx.font = "50px bebas";
                text = Math.floor(degrees / 360 * 100) + "%";
                //Lets center the text
                //deducting half of text width from position x
                text_width = ctx.measureText(text).width;
                //adding manual value to position y since the height of the text cannot
                //be measured easily. There are hacks but we will keep it manual for now.
                ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 15);
            }

            function draw() {
                //Cancel any movement animation if a new chart is requested
                if (typeof animation_loop != undefined) clearInterval(animation_loop);

                ////random degree from 0 to 360
                //new_degrees = Math.round(Math.random() * 360);
                //difference = new_degrees - degrees;
                ////This will animate the gauge to new positions
                ////The animation will take 1 second
                ////time for each frame is 1sec / difference in degrees
                animation_loop = setInterval(animate_to, 1000 / difference);
            }

            //function to make the chart move to new degrees
            function animate_to() {
                //clear animation loop if degrees reaches to new_degrees
                if (degrees == new_degrees)
                //    clearInterval(animation_loop);

                if (degrees < new_degrees)
                    degrees++;
                else
                    degrees--;

                init();
            }

            //add some animation
            draw();

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <!-- Lets make a gauge chart using canvas and js -->
<canvas id="canvas" width ="300" height="300"></canvas>

        <asp:TextBox ID="TextBox1" runat="server">0</asp:TextBox>

    </form>

Answer 1

您可以通过querySelector（）获取值。此外，因为它是服务器端标签，你应该得到以id而不是id本身结束的元素：

var degrees = document.querySelector("[id$='TextBox1']").value;

document.querySelector("[id$='TextBox1']") //Returns the HTML-Element itself
document.querySelector("[id$='TextBox1']").value //Returns the value of the HTMLElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

只需使用getElementByID（“”）。value; 将它存储在您想要的变量中。

将文本框中的值放入javascript变量中

2 个答案: