HTML 与 Javascript 链接有问题
Posted
技术标签:
【中文标题】HTML 与 Javascript 链接有问题【英文标题】：HTML having problem linking with Java Script 【发布时间】：2020-08-16 22:21:16 【问题描述】：似乎代码忽略了java脚本，我做错了什么？ 当我使用浏览器控制台进行调试时，它显示的错误表明没有任何函数被声明，当它们在脚本this image shows the errors browser console is showing 中声明时 该代码包含嵌入在表格中的表单
错误图片：
<!DOCTYPE html>
<html>
<head>
<title>Assignment Form</title>
<script type="text/javascript">
function test1()
var itest1 = document.getElementById("Fname").value;
var regex = /^[a-zA-Za-z\s\'\-]2,15$/;
if (regex.test(itest1))
document.getElementById("message1").style.color = "green";
document.get.ElementById("message1").innerHTML = "Value Accepted";
return true;
else
document.getElementById("message1").style.color = "red";
document.getElementById("message1").innerHTML =
"Name should not be of less than 2 characters and more than 15 characters";
return false;
function test2()
var itest2 = document.getElementById("Lname").value;
var regex = /^[A-Za-z\s\'\-]2,50$/;
if (regex.test(itest2))
document.getElementById("message2").style.color = "green";
document.get.ElementById("message2").innerHTML = "Value Accepted";
return true;
else
document.getElementById("message2").style.color = "red";
document.getElementById("message2").innerHTML =
"Name should not be of less than 2 characters and more than 50 characters";
return false;
function test3()
var itest3 = document.getElementById("Pnumber").value;
var regex = /^\d3-\d3-\d4$/;
if (regex.test(itest3))
document.getElementById("message3").style.color = "green";
document.get.ElementById("message3").innerHTML = "Value Accepted";
else
document.getElementById("message3").style.color = "red";
document.getElementById("message3").innerHTML = "Follow the pattern xxx-xxx-xxxx";
function test4()
document.getElementById("message4").style.color = "green";
document.getElementById("message4").innerHTML = "value accepted";
function test5()
document.getElementById("message5").style.color = "green";
document.getElementById("message5").innerHTML = "value accepted";
function Output()
var fname = document.getElementById("Fname").value;
var lname = document.getElementById("Lname").value;
var username = fname + " " + lname;
var pnumber = document.getElementById("Pnumber").value;
var choice = document.getElementById("b").value;
var date = document.getElementById("Date").value;
document.getElementById("Oheading").innerHTML = "Form Output";
document.getElementById("para").innerHTML = username + " " + date + " " + choice;
document.getElementById("para").innerHTML = pnumber;
</script>
</head>
<body style="background-color:lightgreen;">
<H1 style="color:cyan;" style="margin-left:30px;">Form</H1>
<form>
<table>
<tr>
<td>First Name</td>
<td><input id="Fname" type="text" value="First Name" onblur="test1();" /></td>
<td><span id="message1"></span></td>
</tr>
<tr>
<td>Last Name</td>
<td><input id="Lname" type="text" value="Last Name" onblur="test2();" /></td>
<td><span id="message2"></span></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input id="Pnumber" type="number" name="Phn" onblur="test3();" placeholder="xxx-xxx-xxxx" /></td>
<td><span id="message3"></span></td>
</tr>
<tr>
<td>Select Preferred Brand</td>
<td><input id="b" type="radio" name="brand" value="Nike" checked />Nike<br>
<input id="b" type="radio" name="brand" value="Adidas" />Adidas<br>
<input id="b" type="radio" name="brand" value="Umbro" />Umbro<br></td>
<td><span id="message4"></span></td>
</tr>
<tr>
<td>Enter Birthdate</td>
<td><input id="Date" type="date" placeholder="xx-xx-xxxx" onblur="test5();" /></td>
<td><span id="message5"></span></td>
</tr>
</table>
<button onclick="Output();" style="margin-left:150px;">Get Output</button>
</form>
<H2 id="Oheading"></H2>
<p id="para"></p>
</body>
</html>【问题讨论】：
document.get.ElementById("message1").innerHTML = "Value Accepted"; ？？？ ... get document.getElementById("message1").innerHTML = "Value Accepted"; 后删除点 您还有一个语法错误会阻止脚本运行，修复该问题和提到的其他问题，然后重试 什么是语法错误先生？ 【参考方案1】：将脚本移到<p id="para"></p>之后
有错别字：
document.get.ElementById 将是 document.getElementById
使用textContent 到set value 的span
更新代码：
<!DOCTYPE html>
<html>
<head>
<title>Assignment Form</title>
</head>
<body style="background-color:lightgreen;">
<H1 style="color:cyan;" style="margin-left:30px;">Form</H1>
<form>
<table>
<tr>
<td>First Name</td>
<td><input id="Fname" type="text" value="First Name" onblur="test1();" /></td>
<td><span id="message1"></span></td>
</tr>
<tr>
<td>Last Name</td>
<td><input id="Lname" type="text" value="Last Name" onblur="test2();" /></td>
<td><span id="message2"></span></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input id="Pnumber" type="number" name="Phn" onblur="test3();" placeholder="xxx-xxx-xxxx" /></td>
<td><span id="message3"></span></td>
</tr>
<tr>
<td>Select Preferred Brand</td>
<td><input id="b" type="radio" name="brand" value="Nike" checked />Nike<br>
<input id="b" type="radio" name="brand" value="Adidas" />Adidas<br>
<input id="b" type="radio" name="brand" value="Umbro" />Umbro<br></td>
<td><span id="message4"></span></td>
</tr>
<tr>
<td>Enter Birthdate</td>
<td><input id="Date" type="date" placeholder="xx-xx-xxxx" onblur="test5();" /></td>
<td><span id="message5"></span></td>
</tr>
</table>
<button onclick="Output();" style="margin-left:150px;">Get Output</button>
</form>
<H2 id="Oheading"></H2>
<p id="para"></p>
<script type="text/javascript">
function test1()
var itest1 = document.getElementById("Fname").value;
var regex = /^[a-zA-Za-z\s\'\-]2,15$/;
if (regex.test(itest1))
document.getElementById("message1").style.color = "green";
document.getElementById("message1").textContent = "Value Accepted";
return true;
else
document.getElementById("message1").style.color = "red";
document.getElementById("message1").textContent =
"Name should not be of less than 2 characters and more than 15 characters";
return false;
function test2()
var itest2 = document.getElementById("Lname").value;
var regex = /^[A-Za-z\s\'\-]2,50$/;
if (regex.test(itest2))
document.getElementById("message2").style.color = "green";
document.getElementById("message2").innerHTML = "Value Accepted";
return true;
else
document.getElementById("message2").style.color = "red";
document.getElementById("message2").innerHTML =
"Name should not be of less than 2 characters and more than 50 characters";
return false;
function test3()
var itest3 = document.getElementById("Pnumber").value;
var regex = /^\d3-\d3-\d4$/;
if (regex.test(itest3))
document.getElementById("message3").style.color = "green";
document.get.ElementById("message3").innerHTML = "Value Accepted";
else
document.getElementById("message3").style.color = "red";
document.getElementById("message3").innerHTML = "Follow the pattern xxx-xxx-xxxx";
function test4()
document.getElementById("message4").style.color = "green";
document.getElementById("message4").innerHTML = "value accepted";
function test5()
document.getElementById("message5").style.color = "green";
document.getElementById("message5").innerHTML = "value accepted";
function Output()
var fname = document.getElementById("Fname").value;
var lname = document.getElementById("Lname").value;
var username = fname + " " + lname;
var pnumber = document.getElementById("Pnumber").value;
var choice = document.getElementById("b").value;
var date = document.getElementById("Date").value;
document.getElementById("Oheading").innerHTML = "Form Output";
document.getElementById("para").innerHTML = username + " " + date + " " + choice;
document.getElementById("para").innerHTML = pnumber;
</script>
</body>
</html>【讨论】：
非常感谢它的工作，但为什么需要在段落标记之后移动脚本？我目前已经注册了一门课程，并且讲师几乎明确地使用了 head 标签内的脚本 @Aryan 而不是问 - 将其移回<head> 并修复错字，它仍然有效吗？当然可以，这是一个不必要的步骤，因为您的脚本只是函数声明，并没有运行任何东西。
@AryanShrivastava 是一种很好的做法，否则就像 #freedomn-m 提到的那样，它适用于这种情况。
非常感谢。我现在使用 span onclick 而不是按钮，它给了我想要的输出以上是关于HTML 与 Javascript 链接有问题的主要内容，如果未能解决你的问题，请参考以下文章