Fatal编程技术网
  • javascript/
  • 添加两个文本框，并使用html和javascript在另一个文本框中显示结果，而不使用任何按钮

添加两个文本框，并使用html和javascript在另一个文本框中显示结果，而不使用任何按钮

javascript html css

添加两个文本框，并使用html和javascript在另一个文本框中显示结果，而不使用任何按钮,javascript,html,css,Javascript,Html,Css,我有5个动态分区。每个分区都有一些文本框，其中每个分区都有一组特定的文本字段，如果用户将任何数据放入这些文本框集中的第一个文本框中，那么它应该出现在以前的只读文本框中，而该文本框不是这些分区的一部分。同样，如果用户将任何数据放入这些文本框集中的第二个文本框中，则其添加内容将显示在前一个只读文本框中 在这里，我将附上我一直尝试到现在的全部代码。但是我没有得到想要的结果 <%@page import="beans.*"%> <%@page import="java.util.*"

我有5个动态分区。每个分区都有一些文本框，其中每个分区都有一组特定的文本字段，如果用户将任何数据放入这些文本框集中的第一个文本框中，那么它应该出现在以前的只读文本框中，而该文本框不是这些分区的一部分。同样，如果用户将任何数据放入这些文本框集中的第二个文本框中，则其添加内容将显示在前一个只读文本框中

在这里，我将附上我一直尝试到现在的全部代码。但是我没有得到想要的结果

<%@page import="beans.*"%>
<%@page import="java.util.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>div data entry</title>
</head>
<body>
<br>
<div class="transbox">
<form action="dataentryservletclass" method="post">
<center>
<table><tr><td>Class Name</td> <td><input type="text" name="c_cname"></td>
<td>Class ID</td> <td><input type="text" name="c_cid" placeholder="Enter a Text"></td></tr>
<tr><td>Class Start Date</td> <td><input type="date" name="c_csdate"></td>
<td>Total Marks</td> <td><input type="text" name="c_tmarks" id="txttotal" readonly></td>
</tr></table>
No. of Students <select class="selectbtn" name="c_nos" onchange="myFunction(this)">
<option>Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="myDIV1" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV2" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<div id="myDIV3" style="display:none">
<center>
<table>
<tr>
<th>Student Name</th>
<th>Student Roll No.</th>
<th>Marks Obtain</th>
</tr>
<tr>
<td><input type="text" name="c_sname1"></td>
<td><input type="text" name="c_sroll1"></td>
<td><input type="text" id="txt1" name="c_marks1" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname2"></td>
<td><input type="text" name="c_sroll2"></td>
<td><input type="text" id="txt2" name="c_marks2" onclick="sum()"></td>
</tr>
<tr>
<td><input type="text" name="c_sname3"></td>
<td><input type="text" name="c_sroll3"></td>
<td><input type="text" id="txt3" name="c_marks3" onclick="sum()"></td>
</tr>
</table>
</center>
</div>
<script>
function myFunction(objDrop) {
    var a = document.getElementById("myDIV1");
    var b = document.getElementById("myDIV2");
    var c = document.getElementById("myDIV3");
    if(objDrop.value=="1"){
        if (a.style.display === "none") {
            a.style.display = "block";
            b.style.display = "none";
            c.style.display = "none";
            } 
        else {
            a.style.display = "none";
            }
        }
    else if(objDrop.value=="2"){
        if (b.style.display === "none") {
            a.style.display = "none";
            b.style.display = "block";
            c.style.display = "none";
            } 
        else {
            b.style.display = "none";
            }
        }
    else if(objDrop.value=="3"){
        if (c.style.display === "none") {
            a.style.display = "none";
            b.style.display = "none";
            c.style.display = "block";
            } 
        else {
            c.style.display = "none";
            }
        }
}
function sum(){
    var x=document.getElementById('txt1').value;
    var y=document.getElementById('txt2').value;
    var z=document.getElementById('txt3').value;
    if(x==""){
        x=0;
    }
    if(y==""){
        y=0;
    }
    if(z==""){
        z=0;
    }
    var result=parseInt(x)+parseInt(y)+parseInt(z);
    if(!isNaN(result)){
        document.getElementById('txttotal').value=result;
    }
}
</script>
</center>
<hr><hr>
<button type="submit" value="Submit" class="submitbtn" style="float:right">Submit</button>
</form>
</div>
</body>
</html>


div数据输入


类名
类ID
上课日期
总分
学生人数
选择一个
1.
2.
3.
学名
学生名册编号。
获得分数
学名
学生名册编号。
获得分数
学名
学生名册编号。
获得分数
函数myFunction（objDrop）{
var a=document.getElementById（“myDIV1”）；
var b=document.getElementById（“myDIV2”）；
var c=document.getElementById（“myDIV3”）；
if（objDrop.value==“1”）{
如果（a.style.display==“无”）{
a、 style.display=“block”；
b、 style.display=“无”；
c、 style.display=“无”；
} 
否则{
a、 style.display=“无”；
}
}
else if（objDrop.value==“2”）{
如果（b.style.display==“无”）{
a、 style.display=“无”；
b、 style.display=“block”；
c、 style.display=“无”；
} 
否则{
b、 style.display=“无”；
}
}
else if（objDrop.value==“3”）{
如果（c.style.display==“无”）{
a、 style.display=“无”；
b、 style.display=“无”；
c、 style.display=“block”；
} 
否则{
c、 style.display=“无”；
}
}
}
函数和（）{
var x=document.getElementById（'txt1'）。值；
var y=document.getElementById（'txt2'）.value；
var z=document.getElementById（'txt3'）。值；
如果（x==“”）{
x=0；
}
如果（y==“”）{
y=0；
}
如果（z==“”）{
z=0；
}
var result=parseInt（x）+parseInt（y）+parseInt（z）；
如果（！isNaN（结果））{
document.getElementById（'txttotal'）。值=结果；
}
}


提交
我制作了一个您描述的模型，使用onkeyup事件触发javascript：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
    </title>
    <script type="text/javascript">
        function display(){
            var resultBox = document.getElementById("resultbox");
            var input1 = document.getElementById("input1");
            var input2 = document.getElementById("input2");

            var result = input1.value + input2.value;
            resultBox.value = result;
        }
    </script>
</head>
<body>
    <input id="resultbox" type="text" readonly />
    <form>
        <input type="text" id="input1" onkeyup="display();" onchange="display();" />
        <input type="text" id="input2" onkeyup="display();" onchange="display();" />
    </form>
</body>
</html>


函数显示（）{
var resultBox=document.getElementById（“resultBox”）；
var input1=document.getElementById（“input1”）；
var input2=document.getElementById（“input2”）；
var结果=输入1.value+输入2.value；
resultBox.value=结果；
}
请告诉我您是否正试图实现此目标。

使用文本框的“onchange”事件

您也可以使用keyup和keypress事件

例如：

根据我的理解，你在“marks Acquired textbox”中输入的分数超过了它需要添加的分数，并在“total marks”中显示此代码正在工作，但在我描述的情况下不起作用。我在尝试你的代码时遇到的问题是getElementById总是返回第一个匹配项。因此，您有3个id=“txt1”的输入，它从中获取第一个输入。我个人建议不要对多个元素使用相同的id。相反，您可以将txt1-1、txt1-2等作为id，并添加所有非空元素。或者使用基于学生人数值的更复杂的选择方法。或者不总是使用sum（），您可以编写使用特定输入元素的sum1、sum2和sum3。