如何通过主体 onload() 函数将数组从 javascript 函数获取到 html 表单作为输入字段值？

Question

我有 6 张引导卡，其中卡片的详细信息是 ID、内容。 Onclick每张卡片我现在从本地存储将点击卡片的ID发送到数组中我想将该ID发送到html表单作为输入字段的值我的html代码是：

<body onload = "sample(),issample()">
<div class="form-group" >
  <input type="text" name="goal" id="goal" value=" ">
</div>
<div class="form-group">
  <label for="email">Email</label>
  <input type="text" name="email" class="form-control" required>
</div>
<div class="form-group">
  <label for="password2">Password</label>
  <input type="password" name="password" class="form-control" required>
</div>
<input type="submit" value="Register" class="btn btn-secondary btn-block">

我的JS代码是：

var goal = []
function getGoal(id, content) {
  if (goal.length > 0) {
     var data = { id: id, content: $("#cont_" + id).text() }
     var x = JSON.stringify(data)
     var index = goal.indexOf(x)
     if (index == -1) {
       goal.push(x)
     }
     else {
      goal.splice(index, 1)
     }
  }
  else {
    var data = { id: id, content: $("#cont_" + id).text() }
    var x = JSON.stringify(data)
    goal.push(x)
  }
  localStorage.setItem("goal", JSON.stringify(goal))
  // To get all ids
  var storedNames = JSON.parse(localStorage.getItem("goal"))
  var goalIds = []
  if (storedNames)
   storedNames.forEach(element => {
   element = JSON.parse(element)
   goalIds.push(element.id)
  });
  console.log(goalIds)
}
 function issample(){
 $("#goal").val(goalIds);
 }

我收到错误，因为goalIds 未定义但goalIds 数组正在获取ids 但该ids 没有作为值出现在表单中我如何访问其他函数中的goalids 我的卡片代码是

<div class="col-4" onclick="getGoal(1)">
    <div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
        </div>
      </center>
      </div>
    </div>

  <div class="col-4" onclick="getGoal(2)">
    <div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_2"><b>I am moving</b></p>
        </div>
      </center>
      </div>
    </div>

  <div class="col-4" onclick="getGoal(3)">
    <div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
        </div>
      </center>
      </div>
    </div>

  <div class="col-4" onclick="getGoal(4)">
    <div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_4"><b>I am looking for species</b></p>
        </div>
      </center>
      </div>
    </div>

  <div class="col-4" onclick="getGoal(5)">
    <div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_5"><b>I am moving in someone</b></p>
        </div>
      </center>
      </div>
    </div>

  <div class="col-4" onclick="getGoal(6)">
    <div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_6"><b>other</b></p>
        </div>
      </center>
      </div>
    </div>

我的样式代码是：

var styles = []
var styleIds = []
function getStyle(id) {
    if (styles.length > 0) {
        var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
        var x = JSON.stringify(data)
        var index = styles.indexOf(x)
        if (index == -1) {
            styles.push(x)
        }
        else {
            styles.splice(index, 1)
        }
    }
    else {
        var data = { id: id, image: $("#img_"+id).attr('src'),content: $("#cont_" + id).text() }
        var x = JSON.stringify(data)
        styles.push(x)
    }
    localStorage.setItem("styles", JSON.stringify(styles))
    styleIds = styles.map(element => JSON.parse(element).id);
    console.log(styleIds)
    assample();
}
function assample() {
    $("#style").val(styleIds);
    console.log(styleIds)
}
function initStyles() {
  var storedNames = JSON.parse(localStorage.getItem("styles") || '[]');
  styleIds = storedNames.map(element => JSON.parse(element).id);
}

Answer 1

您需要将goalIds全局变量，以便它可以在两个函数中使用。

分配时使用storedNames.map() ，所以每次都会重置。

getGoal()不使用content参数，您可以删除它。

您应该在issample()的末尾调用issample() getGoal()来更新输入字段。

 var goal = [] var goalIds = []; function getGoal(id) { if (goal.length > 0) { var data = { id: id, content: $("#cont_" + id).text() } var x = JSON.stringify(data) var index = goal.indexOf(x) if (index == -1) { goal.push(x) } else { goal.splice(index, 1) } } else { var data = { id: id, content: $("#cont_" + id).text() } var x = JSON.stringify(data) goal.push(x) } localStorage.setItem("goal", JSON.stringify(goal)) goalIds = goal.map(element => JSON.parse(element).id); console.log(goalIds) issample(); } function issample() { $("#goal").val(goalIds); }

要在页面加载时初始化goalIds ，请添加另一个函数：

function initGoals() {
  var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
  goalIds = storedNames.map(element => JSON.parse(element).id);
}

并在您的onload调用initGoals() ：

<body onload="sample(); initGoals(); issample();">

如何通过主体 onload() 函数将数组从 javascript 函数获取到 html 表单作为输入字段值？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-19 05:34:15

如何通过主体 onload() 函数将数组从 javascript 函数获取到 html 表单作为输入字段值？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-19 05:34:15

解决方案1
0 已采纳 2019-12-19 05:34:15