CODEWITHSUNDEEP
javascripthtml
user13801785
user13801785

Reputation:

Input not being added to array (beginner) JavaScript

When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?

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>

Upvotes: 2

Views: 63

Answers (2)

Mehmet Guler
Mehmet Guler

Reputation: 86

If you want to use form submit with jQuery, you can use like this:

Html

<form>
  <input type="text" id="namesInputter" value="">
  <button type="submit">Add Player</button>
</form>

JavaScript

var subject = [];
function addSubjects(e) {
}

$("form").submit(function(e){
  e.preventDefault();
  namesInputted = document.getElementById('namesInputter').value;
  subject.push(namesInputted);
  console.log(subject);
});

Upvotes: 0

BadPiggie
BadPiggie

Reputation: 6379

Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.

Just remove form tag, if you don't want to submit data.

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>

Upvotes: 2

Related Questions