[英]Cannot access values via document.getElementbyId().value?
出於某種原因，當我在 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各個功能，我的HTML打電話內調用的getElementById（），而不是這樣做以外的功能，為全局變量固定的問題。
無法使用document.getElementById訪問輸入字段中的值
[英]Cannot access value in input field with document.getElementById
document.getElementById（）。value和document.getElementById（）。選中不適用於IE
[英]document.getElementById().value and document.getElementById().checked not working for IE
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.