Javascript 无法通过document.getElementbyId（）访问值。值？

由于某些原因，当我在JS文件中使用document.getElementbyId（）.value时，我无法将用户输入的值访问到我在HTML文档中设置的文本字段中。我已经检查了所有的东西，找不到问题。有人能告诉我正确的解决方法吗

更新：以下是对问题和输出的更清晰解释：

我正在尝试制作一个可定制（通过颜色和三角形）的三角形风扇。当我尝试访问输入的任何值时，我相信它们返回null，因为我无法获得用于风扇RGB的数值，因此我只得到一个黑色正方形作为输出（背景画布）

渲染（彩色）
三角形数


R1
G1
地下一层


R2
G2
地下二层



//WebGL渲染上下文
var colorType=false；
变量大小=高度；
var-gl=null；
函数solid（）{
colorType=true；
}
函数interp（）{
colorType=false；
}
函数绘图（）{
renderTriangle（德国劳埃德船级社）；
}
函数start（）{
var canvas=document.getElementById（“canvas”）；
//初始化OpenGL渲染上下文
gl=canvas.getContext（“实验性webgl”）；
//仅当WebGL可用且正常工作时才继续
如果（德国劳埃德船级社）{
//初始化着色器程序
初始化着色器（gl）；
//初始化一个非常简单的场景，一个三角形
初始化缓冲区（gl、颜色类型、大小）；
//每隔20毫秒调用draw（）函数
设置间隔（抽签，20）；
}
否则{
警报（“WebGL初始化失败！您的浏览器不支持WebGL或未正确配置”）；
}       
}
元素。

如果你有任何问题，请告诉我！ 多谢各位

更新：这是JS，它具有.value用法，是的，我知道我还没有使用RGB值

var shaderProgram  = null;
var vertexBuffer = null;
var vertexColorBuffer = null;
var aPositionIndex = -1;
var aVertexColor = -1;

var r1 = document.getElementById("R1").value;
var g1 = document.getElementById("G1").value;
var b1 = document.getElementById("B1").value;
var r2 = document.getElementById("R2").value;
var g2 = document.getElementById("G2").value;
var b2 = document.getElementById("B2").value;
var numTriangles = document.getElementById("numTris").value;
var numSides = numTriangles * numTriangles;
var numVertices = numTriangles * 3.0;
var PI2 = 2.0 * 3.1415926535897932384626433832795;

///// Initialize the data buffer to pass to the rendering pipeline
///// the geometry and its attributes.
function colorConverter(val){
    if(val < 0){
        val = 0;
    }
    if(val > 255){
        val = 255;
    }
    val = val/255.0;
    return val;
}

function initBuffers(gl, colorType, size) {

    var coloring = colorType;
    r1 = colorConverter(r1);
    g1 = colorConverter(g1);
    b1 = colorConverter(b1);
    r2 = colorConverter(r2);
    g2 = colorConverter(g2);
    b2 = colorConverter(b2);
    var radius = size/2;

    var xVal = 0.0;
    var yVal = 1.0;

    triangleVertices = new Float32Array(numVertices * 2);
    triangleVertices[0] = xVal;
    triangleVertices[1] = yVal;
    for(a = 2; a < numVertices*2; a++){
        triangleVertices[a] = xVal + (radius * Math.cos(a * PI2 / numSides));
        a += 1;
        triangleVertices[a] = yVal + (radius * Math.sin(a * PI2 / numSides));
    }

    triangleVerticesColor = new Float32Array(numVertices*3);
    for(a = 0; a < numVertices*3; a++){
        if(coloring == true){
            var v = 1.0;
        }
        else{
            v = 0.5;
        }
        triangleVerticesColor[a] = v;
    }

    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    vertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, triangleVerticesColor, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

}

///// Define and compile a very simple shader.
function initShaders(gl) {

  var vertexShaderSource = "\
    attribute vec3 a_position;                  \n\
    attribute vec3 a_color;                     \n\
    varying vec3 vertexcolor;                   \n\
    void main(void)                             \n\
    {                                           \n\
        vertexcolor = a_color;                  \n\
        gl_Position = vec4(a_position, 1.0);    \n\
    }                                           \n\
    ";

  var fragmentShaderSource = "\
    precision highp float;                      \n\
    varying vec3 vertexcolor;                   \n\
    void main(void)                             \n\
    {                                           \n\
        gl_FragColor = vec4(vertexcolor, 1.0);  \n\
    }                                           \n\
    ";

  // create the vertex shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);

  // create the fragment shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);

  // Create the shader program
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  // If creating the shader program failed, we show compilation and linking errors.
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Unable to initialize the shader program.");
    var str = "";
    str += "VS:\n" + gl.getShaderInfoLog(vertexShader) + "\n\n";
    str += "FS:\n" + gl.getShaderInfoLog(fragmentShader) + "\n\n";
    str += "PROG:\n" + gl.getProgramInfoLog(shaderProgram);
    alert(str);
  }
}

///// Draw the given triangle interpolating vertices color.
function renderTriangle(gl) {

    // Clear the framebuffer of the rendering context
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // enable the current shader program
    gl.useProgram(shaderProgram);

    // connect the buffer containing the vertices of the triangle with the position attribute
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    aPositionIndex = gl.getAttribLocation(shaderProgram, "a_position");
    gl.enableVertexAttribArray(aPositionIndex);
    gl.vertexAttribPointer(aPositionIndex, 3, gl.FLOAT, false, 0, 0);

    // connect the buffer containing the color of each vertex with the color attribute
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    aVertexColor = gl.getAttribLocation(shaderProgram, "a_color");
    gl.enableVertexAttribArray(aVertexColor);
    gl.vertexAttribPointer(aVertexColor, 3, gl.FLOAT, false, 0, 0);

    // start to draw (!)
    gl.drawArrays(gl.TRIANGLES, 0, numVertices);  

    // disable the current shading program
    gl.useProgram(null);
}

var shaderProgram=null；
var vertexBuffer=null；
var vertexColorBuffer=null；
var aPositionIndex=-1；
颜色变量=-1；
var r1=document.getElementById（“r1”）.value；
var g1=document.getElementById（“g1”）.value；
var b1=document.getElementById（“b1”）.value；
var r2=document.getElementById（“r2”）.value；
var g2=document.getElementById（“g2”）.value；
var b2=document.getElementById（“b2”）.value；
var numTriangles=document.getElementById（“numTris”）.value；
var numSides=numTriangles*numTriangles；
var numVertices=numTriangles*3.0；
var PI2=2.0*3.1415926535897932384626433832795；
/////初始化要传递到渲染管道的数据缓冲区
/////几何体及其属性。
函数颜色转换器（val）{
if（val<0）{
val=0；
}
如果（val>255）{
val=255；
}
val=val/255.0；
返回val；
}
函数初始化缓冲区（gl、颜色类型、大小）{
var着色=着色类型；
r1=颜色转换器（r1）；
g1=颜色转换器（g1）；
b1=颜色转换器（b1）；
r2=颜色转换器（r2）；
g2=颜色转换器（g2）；
b2=颜色转换器（b2）；
变量半径=大小/2；
var xVal=0.0；
var yVal=1.0；
TriangalLevertices=新的Float32Array（numVertices*2）；
三角形杠杆[0]=xVal；
三角形杠杆[1]=yVal；
对于（a=2；avar shaderProgram  = null;
var vertexBuffer = null;
var vertexColorBuffer = null;
var aPositionIndex = -1;
var aVertexColor = -1;

var r1 = document.getElementById("R1").value;
var g1 = document.getElementById("G1").value;
var b1 = document.getElementById("B1").value;
var r2 = document.getElementById("R2").value;
var g2 = document.getElementById("G2").value;
var b2 = document.getElementById("B2").value;
var numTriangles = document.getElementById("numTris").value;
var numSides = numTriangles * numTriangles;
var numVertices = numTriangles * 3.0;
var PI2 = 2.0 * 3.1415926535897932384626433832795;

///// Initialize the data buffer to pass to the rendering pipeline
///// the geometry and its attributes.
function colorConverter(val){
    if(val < 0){
        val = 0;
    }
    if(val > 255){
        val = 255;
    }
    val = val/255.0;
    return val;
}

function initBuffers(gl, colorType, size) {

    var coloring = colorType;
    r1 = colorConverter(r1);
    g1 = colorConverter(g1);
    b1 = colorConverter(b1);
    r2 = colorConverter(r2);
    g2 = colorConverter(g2);
    b2 = colorConverter(b2);
    var radius = size/2;

    var xVal = 0.0;
    var yVal = 1.0;

    triangleVertices = new Float32Array(numVertices * 2);
    triangleVertices[0] = xVal;
    triangleVertices[1] = yVal;
    for(a = 2; a < numVertices*2; a++){
        triangleVertices[a] = xVal + (radius * Math.cos(a * PI2 / numSides));
        a += 1;
        triangleVertices[a] = yVal + (radius * Math.sin(a * PI2 / numSides));
    }

    triangleVerticesColor = new Float32Array(numVertices*3);
    for(a = 0; a < numVertices*3; a++){
        if(coloring == true){
            var v = 1.0;
        }
        else{
            v = 0.5;
        }
        triangleVerticesColor[a] = v;
    }

    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    vertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, triangleVerticesColor, gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

}

///// Define and compile a very simple shader.
function initShaders(gl) {

  var vertexShaderSource = "\
    attribute vec3 a_position;                  \n\
    attribute vec3 a_color;                     \n\
    varying vec3 vertexcolor;                   \n\
    void main(void)                             \n\
    {                                           \n\
        vertexcolor = a_color;                  \n\
        gl_Position = vec4(a_position, 1.0);    \n\
    }                                           \n\
    ";

  var fragmentShaderSource = "\
    precision highp float;                      \n\
    varying vec3 vertexcolor;                   \n\
    void main(void)                             \n\
    {                                           \n\
        gl_FragColor = vec4(vertexcolor, 1.0);  \n\
    }                                           \n\
    ";

  // create the vertex shader
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);

  // create the fragment shader
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);

  // Create the shader program
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

  // If creating the shader program failed, we show compilation and linking errors.
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Unable to initialize the shader program.");
    var str = "";
    str += "VS:\n" + gl.getShaderInfoLog(vertexShader) + "\n\n";
    str += "FS:\n" + gl.getShaderInfoLog(fragmentShader) + "\n\n";
    str += "PROG:\n" + gl.getProgramInfoLog(shaderProgram);
    alert(str);
  }
}

///// Draw the given triangle interpolating vertices color.
function renderTriangle(gl) {

    // Clear the framebuffer of the rendering context
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // enable the current shader program
    gl.useProgram(shaderProgram);

    // connect the buffer containing the vertices of the triangle with the position attribute
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    aPositionIndex = gl.getAttribLocation(shaderProgram, "a_position");
    gl.enableVertexAttribArray(aPositionIndex);
    gl.vertexAttribPointer(aPositionIndex, 3, gl.FLOAT, false, 0, 0);

    // connect the buffer containing the color of each vertex with the color attribute
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
    aVertexColor = gl.getAttribLocation(shaderProgram, "a_color");
    gl.enableVertexAttribArray(aVertexColor);
    gl.vertexAttribPointer(aVertexColor, 3, gl.FLOAT, false, 0, 0);

    // start to draw (!)
    gl.drawArrays(gl.TRIANGLES, 0, numVertices);  

    // disable the current shading program
    gl.useProgram(null);
}

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rendering (colorful)</title>
<body>
    <p> Number of Triangles <input id="numTris" type="number"></p>
    <p>
        R1 <input id="R1" type="number"/>
        G1 <input id="G1" type="number"/>
        B1 <input id="B1" type="number">
    </p><p>
        R2 <input id="R2" type="number"/>
        G2 <input id="G2" type="number"/>
        B2 <input id="B2" type="number"/>
    </p><p>
        <input type="button" onclick="solid(); start()" value="Solid?">
        <input type="button" onclick="interp(); start()" value="Interpolated?">
    </p>
    <script type="text/javascript" src="js/rendering-filled-circle.js"></script>

    <center>
        <canvas id="canvas" width="800" height="800">
            If you are seeing this message your web browser does not support the HTML5 &lt;canvas&gt; element.
        </canvas>
    </center>
</body>

 <script type="text/javascript">
// WebGL rendering context
var colorType = false;
var size = height;
var gl = null;

function solid(){
    colorType = true;
}

function interp(){
    colorType = false;
}

function draw() {
    renderTriangle(gl);
}

function start() {

    var canvas = document.getElementById("canvas");

    // Initialize the OpenGL rendering context
    gl = canvas.getContext("experimental-webgl");

    // Only continue if WebGL is available and working
    if (gl) {
        // initialize shader programs 
        initShaders(gl);

        // initialize a very simple scene, a triangle
        initBuffers(gl, colorType, size);

        // call the draw() function every 20 milliseconds
        setInterval(draw, 20);
    }
    else {
        alert("WebGL initialization failed! Your browser does not support WebGL or it is not properly configured.");    
    }       
}
</script>
</html>