Question

由于某些原因，当我在JS文件中使用document.getElementbyId（）。value时，我无法访问用户输入中的值到我在HTML文档中设置的文本字段。我已检查过所有内容，但无法找到问题。有人可以指导我找到合适的解决方案吗？

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

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

<html>
<head>
    <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>
    </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>

</head>
<body 
<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>
</html>

如果您有任何疑问，请与我们联系！谢谢

更新：这是具有.value用法的JS，是的，我知道我还没有使用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);
}

Answer 1

我改变了你的代码。看看它是否有效：

<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>

Answer 2

在我的JS中，我试图将全局变量设置为HTML中输入框的值。

在我的HTML中，我调用了JS中的函数，但当然这些函数无法使用正确的值访问全局变量，因为这些值尚未设置。

我通过简单地调用我的HTML中调用的JS中的各个函数中的getElementByID（）来修复问题，而不是像那样在函数之外变量

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

2 个答案: