Question

我正在尝试制作一个包含四个文本框的简单HTML页面。在我的输出中，我只获得对象HTMLInputElement。

<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <script>
        function nhap_number(){
            var a = document.nhap.number_a;
            var b = document.nhap.number_b;

        }
        function random_c(){
            var c = Math.round(Math.random()*100)%100;
            document.getElementById("number_c").value=c;
        }
        function random_d(){
            var d = Math.round(Math.random()*100)%100;
            document.getElementById("number_d").value=d;
        }
        function sum(number_a,number_b,number_c,number_d){
            return(number_a+number_b+number_c+number_d);
            alert("ddddddd");
        }
        function show(){
            myDiv = document.getElementById("show");
            myDiv.innerHTML = "sum: "+sum(number_a+number_b+number_c+number_d);
        }

    </script>
    <body>
        <div>
            <form name = "nhap">
                <p> input a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
                <p> input b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
                <p> input c: <input id = "number_c"  placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
                <p> input d: <input id = "number_d"  placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
                <input type="button" value="Valid Form" onClick="show();">
            </form>

        </div>
        <div id="show">
        </div>
    </body>
</html>

Answer 1

您从未定义过number_a，number_b，......等等。有些浏览器会将它们定义为基于id的HTML元素。因此，在这种情况下，值number_a将引用包含id number_a的HTML元素。尝试打印它们会显示值[object HTMLInputElement]，您需要获取它们的.value属性，然后将它们转换为数字：

+number_a.value // note the "+" converts the string to a number
// or
+document.getElementById("number_a").value // recommenced

Answer 2

改变show（）函数

myDiv.innerHTML = "sum:"+sum(parseInt(document.getElementById('number_a').value)+parseInt(document.getElementById('number_b').value)+parseInt(document.getElementById('number_c').value)+parseInt(document.getElementById('number_d').value));

您试图将HTML元素添加到一起。还要对它们的值进行parseInt。

Answer 3

<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled Document</title>
	</head>
	<script>
		function nhap_number(){
			var a = document.nhap.number_a;
			var b = document.nhap.number_b;
			
		}
		function random_c(){
			var c = Math.round(Math.random()*100)%100;
			document.getElementById("number_c").value=c;
		}
		function random_d(){
			var d = Math.round(Math.random()*100)%100;
			document.getElementById("number_d").value=d;
		}
		function sum(number_a,number_b,number_c,number_d){
			return(Number(number_a.value)+Number(number_b.value)+Number(number_c.value)+Number(number_d.value));
		}
		function show(){
			myDiv = document.getElementById("show");
          debugger;
			myDiv.innerHTML = "sum: "+sum(number_a,number_b,number_c,number_d);
		}
		
	</script>
	<body>
		<div>
			<form name = "nhap">
				<p> nhap a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
				<p> nhap b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
				<p> nhap c: <input id = "number_c"  placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
				<p> nhap d: <input id = "number_d"  placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
				<input type="button" value="Valid Form" onClick="show();">
			</form>
			
		</div>
		<div id="show">
		</div>
	</body>
</html>

我的输出显示“[object HTMLInputElement]”而不是我输入的总和

3 个答案: