一个 div 输入元素不会使用 javascript 从 sessionStorage 中提取信息答案

【问题标题】：One div input element will not pull information from sessionStorage using javascript一个 div 输入元素不会使用 javascript 从 sessionStorage 中提取信息
【发布时间】：2021-09-26 01:17:05
【问题描述】：

enter image description here我正在尝试开发一个工作票务工具及其模板站点，以便更轻松地为帮助台做笔记，并且当事情升级并且您单击升级模板按钮时。当升级模板加载时，我希望它从会话存储中提取信息，以避免复制和粘贴已记录的笔记。

这就是我在会话存储中存储信息的方式，我通过 Chrome 浏览器检查了信息是否存储在会话存储中。

if(callInbound)
{
        sessionStorage.setItem("ACTIVITYTYPE", document.form1.activity.value);
        sessionStorage.setItem("CONTACTNAME", document.form1.name.value);
        sessionStorage.setItem("VIPSTATUS", document.form1.vip.value);
        sessionStorage.setItem("CONTACTNUMBER", document.form1.phone.value);
        sessionStorage.setItem("CALLERLOCATION", document.form1.location.value);
        sessionStorage.setItem("ISSUEDESCRIPTION",document.form1.issueDescription.value); <--PROBLEM ITEM
        sessionStorage.setItem("ERRORMESSAGE", document.form1.errorMessage.value);
        sessionStorage.setItem("TROUBLESHOOTING", document.form1.troubleshooting.value);
        sessionStorage.setItem("KNOWLEDGEUSED", document.form1.knowledgeUsed.value);
        sessionStorage.setItem("SEARCHTERMSTRIED", document.form1.searchtermsTried.value);
        sessionStorage.setItem("SCREENSHOTSATTACHED", document.form1.screenshotsAttached.value);
        sessionStorage.setItem("SURVEYOFFERED", document.form1.surveyOffered.value);
        sessionStorage.setItem("SURVEYTAKEN", document.form1.surveyTaken.value);
}

这是正在加载信息的页面，除了被识别为问题的页面之外，所有页面都被填充到模板中。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>DSI Call Outbound</title>
<script type="text/javascript" src="DSI.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEventListener('load', ()=>{
  let callInboundCallDropped = sessionStorage.getItem("CALLINBOUNDCALLDROPPED");
  let callOutboundCallDropped = sessionStorage.getItem("CALLOUTBOUNDCALLDROPPED")
  let additionalIssue = sessionStorage.getItem("ADDITIONALISSUE");
  let voicemailCallBack = sessionStorage.getItem("VOICEMAILRECEIVED");

  if (callInboundCallDropped == "true")
  {
    document.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION");<--Problem Item
    document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
    document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
    document.form1.errorMessage.value = sessionStorage.getItem("ERRORMESSAGE");  
    
  }
  else if (callOutboundCallDropped == "true")
  {
    document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
    document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
    document.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION");<--Problem item
    document.form1.errorMessage.value = sessionStorage.getItem("ERRORSMESSAGE");
    
  }
  else if(additionalIssue == "true")
  {
    document.form1.activity.value = "***ADDITIONAL ISSUE***";
    document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
    document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
    
    
  }
  else if(voicemailCallBack == "true");
  {
    document.form1.name.value = sessionStorage.getItem("CONTACTNAME");
    document.form1.phone.value = sessionStorage.getItem("CONTACTNUMBER");
    document.form1.issueDescription.value = sessionStorage.getItem("VOICEMAILSUBJECT");
    document.form1.errorMessage.value = sessionStorage.getItem("ERRORMESSAGE");
    
  }

  //sessionStorage.clear();
  

})
</script>

加载页面时，所有其他项目都会从会话存储中正确加载。我通过 Chrome 浏览器检查部分的应用程序部分并添加 alert("ISSUEDESCRIPTION"); 确认信息在会话存储中。在问题项行下方，它按预期工作。

我尝试了以下方法：

// 从一页存储你的值 sessionStorage.setItem("values", “输入文本”）；

// 从另一个页面获取值 var value = sessionStorage.getItem("值");
//将html document.getElementById("issueDescription").value = sessionStorage.getItem("ISSUEDESCRIPTION"); 中的div元素换行并分配id

这是问题元素：

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge  w3-animate-zoom"></i></div>
    <div class="w3-rest">
       <p>Issue Description</p>
      <input class="w3-input w3-border"  name="issueDescription" type="text" placeholder="[Issue Description Here]">
    </div>
</div>

这是同一页面上正确填充会话存储信息的元素：

    <div class="w3-row w3-section">
      <div class="w3-col" style="width:50px"><i class="w3-xxlarge  w3-animate-zoom"></i></div>
        <div class="w3-rest">
           <p>Phone Number Used</p>
          <input class="w3-input w3-border" name="phone" type="text" placeholder="(xxx)xxx-xxxx">
        </div>
</div>

请告诉我，如果我只是引用了一些错误的东西，比如拼写错误，尽管我已经花了几个小时仔细检查了所有内容。希望 Visual Studio Code 中有一个故障排除/调试功能，可以让这种东西逐步完成。如果有但我不知道，请告诉我。

【问题讨论】：

如何设置CALLINBOUNDCALLDROPPED、CALLOUTBOUNDCALLDROPPED、ADDITIONALISSUE和VOICEMAILRECEIVED？你检查条件== "true"了吗？
它们都是根据用于加载此页面的表单设置的。因此，如果从 Call Inbound 模板中单击它，则将分别命名的会话存储项设置为 true。并且这些中的每一个都已正确评估为真。
这是在 CallInbound 页面上，所以说它是一个呼叫入站相同的东西在 Calloutbound 页面上，但不是 true 而是设置为 false 并正确评估
我添加了一张我在使用页面时在浏览器中看到的图片，以便更容易理解正在发生的事情。唯一的问题是“问题描述”。所有其他框都可以正常工作。会话存储数据也在图片中可见。抱歉，不知道如何将描述添加到图像中，这就是为什么它在链接上显示默认值。第一次在这个网站上发帖。

标签： javascript html css

【解决方案1】：

不确定为什么这在我尝试的前几次不起作用，但这次我复制并粘贴了“documents.form1.issueDescription.value = sessionStorage.getItem("ISSUEDESCRIPTION"); 中的元素名称" 问题已解决，我发誓我昨晚深夜重复了此操作，一定是拼写错误。

【讨论】：