<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Array Values</title>
</head>
<body>
<h1>Add Element Javascript</h1>
<input type="text" id="myInput" class="inputField" placeholder="Type something...">
<button onclick="addToMyArray()" class="arrayButton">Add to Array</button>
<div id="output" class="outputContainer"></div>
<script>
// Initialize an empty array
let myArray = [];
function addToMyArray() {
// Get the input element value
let inputValue = document.getElementById('myInput').value;
// Check if the input is not empty
if (inputValue.trim() !== '') {
// Add the value to the array
myArray.push(inputValue);
// Update the output div with array content
updateOutput();
} else {
alert("Please enter a value before adding to the array.");
}
}
function updateOutput() {
// Get the output div element
let outputDiv = document.getElementById('output');
// Clear previous content
outputDiv.innerHTML = '';
// Display array content
for (let i = 0; i < myArray.length; i++) {
outputDiv.innerHTML += `<p>${myArray[i]}</p>`;
}
}
</script>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}
.inputField {
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.arrayButton {
padding: 10px;
margin: 5px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.arrayButton:hover {
background-color: #45a049;
}
.outputContainer {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
font-size: 16px;
}
</style>
</body>
</html>