Question

我正在创建一个网页，用户可以在该网页上申请公司职位。我的目的是一旦单击了某个工作的链接，然后就已经用适当的数据填写了工作参考号。但是相反，文本框充满了“未定义”

用于显示作业的页面和申请表格的JavaScript文件-不用担心validate变量，我不想复制整个文件。

function storeJobNumber(jobRefNumber) {
    var da = document.getElementById("DA");
    var jd = document.getElementById("JD");
    var qa = document.getElementById("QA");
    var fed = document.getElementById("FED");

    if (da.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188345"
    }

    if (jd.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188386"
    }
    if (qa.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188323"
    }
    if (fed.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188357"
    }
}
function job_apply(){
    if (localStorage.getItem("jobNumber") !== null) {
        var jobNumber = document.getElementById("jobNumber")
        jobNumber.value = localStorage.getItem("jobNumber");
    }


}

function init() {
    if (document.getElementById("applypage")!=null) {
    var regForm = document.getElementById("regform");
    job_apply();
    regForm.onsubmit = validate;

    }
    else if (document.getElementById("jobspage") !=null) {
    storeJobNumber();
    }
}

window.onload = init;

申请表格HTML

<!DOCTYPE html>
<html Lang="en"> 
<head>
    <meta charset="utf-8" />
    <meta name="description" content="CWA HELP DESK" />
    <meta name="keywords" content="HTML, CWA, Help, Desk" />
    <meta name="author" content ="Harry Keys" />
    <title>Application Form</title>
    <link href="style/style.css" rel="stylesheet" type="text/css">
    <script src="apply.js"></script>
</head>
<body id="applypage">

<form id="regform" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php" novalidate="novalidate">
    <img src="images/logo.png" alt="Company Logo" />
    <h1> Job Application Form </h1>

<fieldset>
<p><label for="jobNumber">Job Reference Number</label>
<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" name="jobNumber" id="jobNumber" maxlength="5" size="7" required="required" readonly/>
    </p>

包含可用作业的HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="Assignment Page 1" />
    <meta name="keywords" content="Home, Page, Details, Company" />
    <meta name="author" content ="Harry Keys" />
    <title>Available Jobs </title>
    <link href="style/style.css" rel="stylesheet" type="text/css">
    <script src="apply.js"></script>
</head>
<body id="jobspage">
<a href="index.html" class="button">Home</a>
<a href="jobs.html" class="button">Jobs</a>
<a href="about.html" class="button">About</a>
<a href="Enhancements.html" class="button">Enhancements</a>

<h1>Hartley Studios <img src="images/logo.png" alt="Company Logo" class="right"/> </h1>
<hr>
<section>
<fieldset class="JobsF">
<img src="images/Database.jpg" alt="Database Analyst"/>
<h3> Database Analyst </h3>
<p> The purpose of a Database Analyst is to Maintain data storage and access by designing physical databases...</p>
<a href="#DA" class="button">Discover</a>
<a href="apply.html" class="button" id="DA">Apply</a>
</fieldset>

<fieldset class="JobsF">
<img src="images/Software.jpg" alt="Software Developer"/>
<h3> Java Developer </h3>
<p> The purpose of a Java Developer is generally responsible for the development, design and implementation of Java products...</p>
<a href="#SD" class="button">Discover</a>
<a href="apply.html" class="button" id="JD">Apply</a>
</fieldset>

<fieldset class="JobsF">
<img src="images/QA.jpg" alt="QA Engineer"/>
<h3> QA Engineer </h3>
<p> The purpose of a QA Engineer is to put programs through rigorous tests, In an attempt to locate any areas of weakness...</p>
<a href="#QA" class="button">Discover</a>
<a href="apply.html" class="button" id="QA">Apply</a>
</fieldset>

<fieldset class="JobsF">
<img src="images/FED.jpg" alt="Front End Developers"/>
<h3> Front End Developer </h3>
<p> The front end of a website is the part users see and interact with – they play critical part of any business...</p>
<a href="#FED" class="button">Discover</a>
<a href="apply.html" class="button" id="FED">Apply</a>
</fieldset>
</section>

当用户单击Database Analyst的Apply按钮时，文本框“ jobNumber”应包含数字188345，但不包含任何内容或有时不包含“ undefined”

Answer 1

localStorage.setItem的语法为localStorage.setItem(keyname, value)，应类似于localStorage.setItem("jobNumber", "188345")而不是localStorage.setItem("jobNumber", jobRefNumber) == "188345"。引用https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage

Answer 2

您永远不会为链接添加事件侦听器。函数storeJobNumber仅在init上调用，您不知道在哪个链接上被按下。您需要添加事件侦听器以在单击链接时触发，然后将ID保存到本地存储。

赞：

function storeJobNumber(jobRefNumber) {
    var da = document.getElementById("DA");
    var jd = document.getElementById("JD");
    var qa = document.getElementById("QA");
    var fed = document.getElementById("FED");

    // new code
    da.addEventListener("click", function() {
      localStorage.setItem("jobNumber", 188345);
    });
    jd.addEventListener("click", function() {
      localStorage.setItem("jobNumber", 188386);
    });
    qa.addEventListener("click", function() {
      localStorage.setItem("jobNumber", 188323);
    });
    fed.addEventListener("click", function() {
      localStorage.setItem("jobNumber", 188357);
    });
/* Old code
    if (da.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188345"
    }

    if (jd.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188386"
    }
    if (qa.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188323"
    }
    if (fed.onclick) {
        localStorage.setItem("jobNumber", jobRefNumber) == "188357"
    }*/ 
}

链接到工作的插件：http://plnkr.co/edit/EXD9jG4h2mDZNxvMKCRy?p=preview

单击按钮后在页面之间传输数据

2 个答案: