Reputation:
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
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
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