我在用HTML/JavaScript将表单中的答案保存到.txt文件时遇到问题。正如你所看到的，它会询问所有细节和保存数据的文件名，但即使按下提交按钮，它也不会做任何事情。因此，我不能100%确定发生了什么，我可能在代码中的某个地方搞砸了。目前，我希望能够做到这一点，只使用前端语言，而不使用服务器端知识。忽略表单操作中的main.php。我不能100%确定这是否可以在没有PHP的情况下完成。
Build.html：
<!DOCTYPE html>
<html>
<head>
<title>Resumaker</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src = "main.js"></script>
</head>
<body>
<header>
<nav>
<h1> RESUMAKER </h1>
<ul>
<li style="float:right"><a class = "active"
href="build.html" target="_blank"><span> Build a Resume
</span></a></li>
<li><a href="createaccount.html" target="_blank"><span>
Create Account </span></a></li>
<li><a href="signin.html" target="_blank"><span> Sign in
</span></a></li>
<li><a href="resources.html" target="_blank"><span>
Resources </span></a></li>
<li><a href="contacts.html" target="_blank"><span> Talk to
us </span></a></li>
</ul>
</nav>
</header>
<h1 class = "third"><strong> Build your resume here! </strong></h1>
<h2 class = "fourth"> YOUR PERSONAL INFO </h2>
<form autocomplete="on" method="post" class = "fourth">
<label for = "first_name"> <b>First name:</b> </label>
<input type="text" name="first_name" id = "first_name"
placeholder="John" autofocus /><br>
<label for = "last_name"> <b>Last name:</b> </label>
<input type="text" name="last_name" id = "last_name" placeholder="Doe"
/><br>
<label for = "user_email"> <b>Email:</b> </label>
<input type="email" name="user_email" id = "user_email"
placeholder="johndoe@gotham.com" autocomplete="off" /><br>
<label for = "phone_number"> <b>Phone Number:</b> </label>
<input name="phone_number" type="number" id = "phone_number"
placeholder="(987)-654-3210" /><br>
<label for = "location"> <b>Location:</b> </label>
<input type="text" name="location" id = "location" placeholder="Gotham
City" autofocus /><br>
<label for = "linkedin"> <b>LinkedIn:</b> </label>
<input type="url" name="linkedin" id = "linkedin" autofocus /><br>
<label for="filename"> <b>Filename</b></label>
<input type = "text" id="filename" value="" size="40"
placeholder="title.md">
<br/><br/>
<input onclick="saveFormAsTextFile()" type="button" value = "Make your
resume" />
<input type="reset"><br><br>
</form>
</body>
</html>
main.js:
function saveFormAsTextFile()
{
alert('Hey');
var textToSave =
'---n'+
'First Name: ' + document.getElementById('first_name').value + 'n'+
'Last Name: ' + document.getElementById('last_name').value + 'n' +
'Email: ' + document.getElementById('user_email').value + 'n' +
'Phone Number: ' + document.getElementById('phone_number').value +
'n' +
'Location: ' + 'n- ' + document.getElementById('location').value +
'n' +
'LinkedIn: ' + 'n- ' + document.getElementById('linkedin').value +
'n' +
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("filename").value;
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
主文件：Test.html
<head>
<title>Resumaker</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav>
<h1 class = "second"> RESUMAKER </h1>
<ul>
<li><a href="build.html" target="_blank"><span> Build Your Resume </span></a></li>
<li><a href="createaccount.html" target="_blank"><span> Create Account </span></a></li>
<li><a href="signin.html" target="_blank"><span> Sign in </span></a></li>
<li><a href="resources.html" target="_blank"><span> Resources </span></a></li>
<li><a href="contacts.html" target="_blank"><span> Talk To Us </span></a></li>
</ul>
</nav>
</header>
<script type="text/javascript" src="main.js"></script>
</body>
将输入类型更改为"按钮"；。将其设置为"；提交"；提交表单而不触发onclick函数
编辑
我进一步研究了代码，在第19行发现了一个不存在的元素
document.getElementById('content').value
新建编辑
之前
var textToSaveAsBlob
你应该把结尾的"+"用">
(编辑：替换第一个答案(
删除action="main.php"，它调用不存在的
将type="submit"转换为type="button"