时间戳

首页 > 解决方案 > 输入未添加到数组（初学者）JavaScript

javascript - 输入未添加到数组（初学者）JavaScript

问题描述

当文本写入输入框然后单击按钮时，我希望将文本（值）添加到我为其创建的数组中（该数组称为“主题”）。输入框中的文本（值）未添加...为什么？

var subject = [];
function addSubjects() {
  namesInputted = document.getElementById('namesInputter').value;
  subject.push(namesInputted);
  console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Prueva tu Suerte</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <form class="" action="index.html" method="post">
    <input type="text" id="namesInputter" value="">
    <button onclick="addSubjects()">Add Player</button>
  </form>
  <span id='S'></span>
  <span id='V'></span>
  <span id='O'></span>
  <span id='P'></span>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="function.js"></script>
</body>

</html>

标签： javascripthtml

解决方案

实际上，您的代码正在运行。输入值附加到array. 但问题是，您正在使用form. 因此，当您单击按钮时，它将在将值添加到后立即提交表单array。所以页面将刷新并且array将变为空。

form如果您不想提交数据，只需删除标签。

var subject = [];
function addSubjects() {
  namesInputted = document.getElementById('namesInputter').value;
  subject.push(namesInputted);
  console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Prueva tu Suerte</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <input type="text" id="namesInputter" value="">
  <button onclick="addSubjects()">Add Player</button>
  <span id='S'></span>
  <span id='V'></span>
  <span id='O'></span>
  <span id='P'></span>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="function.js"></script>
</body>

</html>

推荐阅读