出于某种原因，当我在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 <canvas>> 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);
}
我改变了你的代码。看看它是否有效：
<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 <canvas> 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>
在我的JS中，我试图将全局变量设置为HTML中输入框的值。
在我的HTML中，我调用了JS中的函数，但当然这些函数无法使用正确的值访问全局变量，因为这些值尚未设置。
我通过简单地调用我的JS中的各个函数中的getElementByID（）来解决问题，而不是在函数外部作为全局变量调用。