将参数从一个 HTML 页面传递到另一个 HTML 页面

Passing parameters from one HTML page to another

本文关键字：HTML 页面 另一个 一个 参数      更新时间：2023-09-26

我有2页;笔记.html和症状.html。在症状.html，我有某种评级系统。假设用户从 0 到 2 比例中选择 1，那么它应该传递给 calendar.html。我在症状页面中至少有 10 个这样的评级。

症状代码页面：

<div style="position: absolute; top: 10px; left: 23px;">Acne:</div>
<div class="starbox ghosting autoupdate" style="position: absolute; right: 16px; top: 3px;" id="acne"></div>
<div style="position: absolute; top: 42px; left: 23px;">Backaches:</div>
<div class="starbox ghosting autoupdate" style="position: absolute; right: 16px; top: 38px;" id="back"></div>
<script>
  function saveSymptoms() {
    var a = document.getElementById("acne");
    var b = document.getElementById("back");
    switch (classname = starbox ghosting autoupdate) {
      case 0:
        var one = low;
        break;
      case 1:
        var two = medium;
        break;
      case 2:
        var three = high;
        break;
    }
    var url = "notes.html?Agne=" + a,
      "back=" + b;
    window.location.href = url;
    console.log(url);
    document.getElementById("myButton").onclick = function() {
      location.href = "notes.html";
    }
  }
</script>

面临的问题：单击保存按钮时，参数不会传递到 url。

预期成果：输出应如下所示： file:///C:/Users/AjayKumar/TizenWorkspace/PTracker/notes.html?acne=low;back=high

我的结果：我得到这个： file:///C:/Users/AjayKumar/TizenWorkspace/PTracker/notes.html?acne=;back=

var a = document.getElementById("acne");

将返回一个 DOM 对象 – 在您的情况下，它将返回一个 DIV。DIV 是一大堆属性的集合——它就像一个盒子，里面有一堆有用的东西。现在，您将框本身分配给变量a和b;您想在框中找到其中一个项目（我认为是 DIV 的文本）并改用它。

例如，如果您希望 DIV 的文本是字符串"low"，则需要访问 DIV 的 innerText 属性。换句话说，你想要类似的东西

var url = "notes.html?Acne=" + a.innerText + "&back=" + b.innerText

您可以在此处阅读有关 HTML 元素（包括 DIV）的属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

你的笔记.html文件将需要解析查询字符串，大概是用javascript;为此，你可能想看看如何从GET参数中获取值？。

然而：

我想建议你用一种非标准的方法，因此更困难。看起来您希望用户做出决定，例如，值是低、中还是高。通常，你会做这样的事情：

<form method="post" action="notes.html">
<label>Acne Severity: 
  <select type=select>
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
  </select>
</label>
<p><input type="submit" value="Submit"></p>
</form>

这样，你可以使用HTML/Javascript FORM对象;它更容易用于这种事情，因为它是为用户输入，值和提交到其他页面而设计的。

您可能需要查看 http://www.quirksmode.org/js/forms.html 和 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript 以获取更多信息。

哼！

相关文章：