在HTML中顯示當前滑塊值（輸入類型=「範圍」）

我正在JS中製作一個簡單的利薩如圖生成器。我無法在html代碼中顯示當前滑塊值。下面是完整的代碼：在HTML中顯示當前滑塊值（輸入類型=「範圍」）

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
 
    <meta charset="UTF-8"> 
 
    <title>Lissajous figures</title> 
 
    <br> 
 
    <script type="application/javascript"> 
 
     var ctx; 
 
     var timer = null; 
 
     var aS = new Array(); 
 
     var rad = 189; 
 
     var max=3*360, m1=max-1, m2 = max/2; 
 
     var iXo=0, iYo=m2/2; 
 
     var parN=2, parM=1; 
 
     function init() { 
 
      var canvas = document.getElementById("field"); 
 
      if (canvas.getContext) { ctx = canvas.getContext("2d"); 
 
       sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2); 
 
       s=-sf; c=cf; 
 
       for (i=0; i<m2; i++) { 
 
        s1=s*cf+c*sf; c=c*cf-s*sf; s=s1; 
 
        aS[i]=Math.round(rad*(1.+s))+1; 
 
        aS[i+m2]=Math.round(rad*(1.-s))+1; 
 
       } 
 
       startAnimation(); 
 
      } 
 
     } 
 
     function draw() { 
 
      Xo=aS[iXo],Yo=aS[iYo]; 
 
      ctx.beginPath(); 
 
      ctx.moveTo(Xo,Yo); 
 
      for (j=max; j>0; j--) { 
 
       iX=(iXo+parM) % max; iY=(iYo+parN) % m1; 
 
       X=aS[iX]; Y=aS[iY]; 
 
       ctx.lineTo(X,Y); 
 
       iXo=iX; iYo=iY; Xo=X; Yo=Y; 
 
      } 
 
      ctx.clearRect (0, 0, 500, 500); 
 
      ctx.stroke(); 
 
\t \t \t ctx.strokeStyle="green"; 
 
\t \t \t ctx.lineWidth = 3; 
 
     } 
 
     function startAnimation() { 
 
      setInterval(draw,0); 
 
     } 
 
    </script> 
 
</head> 
 
<h1>Lissajous Figure Generator</h1> 
 
<br> 
 
<body onload="init();" bgcolor="black"> 
 
<center><canvas id="field" width="400" height="400"> 
 
</canvas> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <h2>Choose parameters value using sliders below:</h2> 
 
\t <p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)"> 
 
\t <output name="show_parM_val" id="parM">1</output></h2> \t \t \t \t \t \t \t \t \t \t \t 
 
    </p> 
 
\t <p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)"> 
 
    <output name="show_parN_val" id="parN">2</output></h2> 
 
    </p> 
 
</center> 
 
</body> 
 
</html>

如何使產值的工作？什麼應該是正確的ID？我說的是下面的代碼片段：

<h2>Choose parameters value using sliders below:</h2> 
 
    \t <p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)"> 
 
    \t <output name="show_parM_val" id="parM">1</output></h2> \t \t \t \t \t \t \t \t \t \t \t 
 
     </p> 
 
    \t <p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)"> 
 
     <output name="show_parN_val" id="parN">2</output></h2>

來源

2017-01-10 szubansky

https://fiddle.jshell.net/e2xzk04o/'' – dandavis

parM = <---您正在設置變量...不設置元素的html。 – epascarello

你的問題是你設置幻燈片中全球範圍內的變量，但在你的代碼中使用本地變量，檢查此更新的工作例如：

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
 
    <meta charset="UTF-8"> 
 
    <title>Lissajous figures</title> 
 
    <br> 
 
    <script type="application/javascript"> 
 
    var ctx; 
 
    var timer = null; 
 
    var aS = new Array(); 
 
    var rad = 189; 
 
    var max = 3 * 360, 
 
     m1 = max - 1, 
 
     m2 = max/2; 
 
    var iXo = 0, 
 
     iYo = m2/2; 
 
    parN = 2; 
 
    parM = 1; 
 

 
    function init() { 
 
     var canvas = document.getElementById("field"); 
 
     if (canvas.getContext) { 
 
     ctx = canvas.getContext("2d"); 
 
     sf = Math.sin(3.14159265/m2); 
 
     cf = Math.cos(3.14159265/m2); 
 
     s = -sf; 
 
     c = cf; 
 
     for (i = 0; i < m2; i++) { 
 
      s1 = s * cf + c * sf; 
 
      c = c * cf - s * sf; 
 
      s = s1; 
 
      aS[i] = Math.round(rad * (1. + s)) + 1; 
 
      aS[i + m2] = Math.round(rad * (1. - s)) + 1; 
 
     } 
 
     startAnimation(); 
 
     } 
 
    } 
 

 
    function draw() { 
 
     Xo = aS[iXo], Yo = aS[iYo]; 
 
     ctx.beginPath(); 
 
     ctx.moveTo(Xo, Yo); 
 
     for (j = max; j > 0; j--) { 
 
     iX = (iXo + parM) % max; 
 
     iY = (iYo + parN) % m1; 
 
     X = aS[iX]; 
 
     Y = aS[iY]; 
 
     ctx.lineTo(X, Y); 
 
     iXo = iX; 
 
     iYo = iY; 
 
     Xo = X; 
 
     Yo = Y; 
 
     } 
 
     ctx.clearRect(0, 0, 500, 500); 
 
     ctx.stroke(); 
 
     ctx.strokeStyle = "green"; 
 
     ctx.lineWidth = 3; 
 
    } 
 

 
    function startAnimation() { 
 
     setInterval(draw, 0); 
 
    } 
 
    </script> 
 
</head> 
 
<h1>Lissajous Figure Generator</h1> 
 
<br> 
 

 
<body onload="init();" bgcolor="black"> 
 
    <center> 
 
    <canvas id="field" width="400" height="400"> 
 
    </canvas> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div style="background: #999;"> 
 
    <h2>Choose parameters value using sliders below:</h2> 
 
    <p> 
 
     <h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="document.getElementById('parM').innerText = parseInt(this.value);parM=parseInt(this.value)"> 
 
\t <output name="show_parM_val" id="parM">1</output></h2> \t 
 
    </p> 
 
    <p> 
 
     <h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="document.getElementById('parN').innerText = parseInt(this.value);parN=parseInt(this.value)"> 
 
    <output name="show_parN_val" id="parN">2</output></h2> 
 
    </p> 
 
    </div> 
 
    </center> 
 
</body> 
 

 
</html>

來源

2017-01-10 23:04:34

仍然相同 - 輸出不會改變 – szubansky

@szubansky，對不起，我只是更新了代碼，以匹配:) –

這也適用，比我預期的要好哈哈，謝謝：D – szubansky

這工作。使用函數updateTextInput（val）函數定位元素以更新字段中的值。答案在這裏：HTML5 input type range show range value

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
    <meta charset="UTF-8"> 
    <title>Lissajous figures</title> 
    <br> 
    <script type="application/javascript"> 
     var ctx; 
     var timer = null; 
     var aS = new Array(); 
     var rad = 189; 
     var max=3*360, m1=max-1, m2 = max/2; 
     var iXo=0, iYo=m2/2; 
     var parN=2, parM=1; 
     function init() { 
      var canvas = document.getElementById("field"); 
      if (canvas.getContext) { ctx = canvas.getContext("2d"); 
       sf=Math.sin(3.14159265/m2); cf=Math.cos(3.14159265/m2); 
       s=-sf; c=cf; 
       for (i=0; i<m2; i++) { 
        s1=s*cf+c*sf; c=c*cf-s*sf; s=s1; 
        aS[i]=Math.round(rad*(1.+s))+1; 
        aS[i+m2]=Math.round(rad*(1.-s))+1; 
       } 
       startAnimation(); 
      } 
     } 
     function draw() { 
      Xo=aS[iXo],Yo=aS[iYo]; 
      ctx.beginPath(); 
      ctx.moveTo(Xo,Yo); 
      for (j=max; j>0; j--) { 
       iX=(iXo+parM) % max; iY=(iYo+parN) % m1; 
       X=aS[iX]; Y=aS[iY]; 
       ctx.lineTo(X,Y); 
       iXo=iX; iYo=iY; Xo=X; Yo=Y; 
      } 
      ctx.clearRect (0, 0, 500, 500); 
      ctx.stroke(); 
      ctx.strokeStyle="green"; 
      ctx.lineWidth = 3; 
     } 
     function startAnimation() { 
      setInterval(draw,0); 
     } 
     function updateTextInput(val) { 
      document.getElementById('textInput').value=val; 
     } 
     function updateTextInput2(val) { 
      document.getElementById('textInput2').value=val; 
     } 
    </script> 
</head> 
<h1>Lissajous Figure Generator</h1> 
<br> 
<body onload="init();" bgcolor="black"> 
<center><canvas id="field" width="400" height="400"> 
</canvas> 
    <br> 
    <br> 
    <br> 
    <h2>Choose parameters value using sliders below:</h2> 
    <p><h2>A = <input type="range" id="value1" name="parM_choose" min="1" max="9" value="1" step="1" oninput="parM=parseInt(this.value)" onchange="updateTextInput(this.value);"> 
    <input type="text" id="textInput" value=""> 
    </p> 
    <p><h2>B = <input type="range" id="value2" min="1" max="9" value="2" step="1" oninput="parN=parseInt(this.value)" onchange="updateTextInput2(this.value);"> 
    <input type="text" id="textInput2" value=""> 



    </p> 
</center> 
</body> 
</html>

來源

2017-01-10 23:01:57

完美，非常感謝！ :)） – szubansky

在HTML中顯示當前滑塊值（輸入類型=「範圍」）

回答

相關問題