个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:28:51 25 4
gpt4 key购买 nike

我正在制作一种仪表控制。仪表控件需要从文本框中获取值然后进行调整。(也许有一个按钮，但那是稍后的事)

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

变量是“var Degrees”，现在有一个随机值 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>

最佳答案

可以通过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

关于javascript - 将文本框中的值放入 JavaScript 变量中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41037590/

25 4 0
文章推荐： javascript - MongoDB - 包含包含和排除的复杂$切片
文章推荐： javascript - 在 html 标签内执行 Javascript 函数
文章推荐： javascript - Angular 2 : EXCEPTION: Unexpected token < in JSON at position 0
文章推荐： javascript - 获取 Bootstrap 弹出元素的 ID
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com