let words = [];
var longestCt = 0;
var longestWord = "";
var myList = [];
var myList = ['Loops','are','used','while','Learning JavaScript'];
function addWords() {
let template = words.map(word => `<li>${word}</li>`).join('\n');
document.querySelector('ul').innerHTML = template;
}
addWords();
let btnAdd = document.querySelector('button');
let input = document.querySelector('input');
btnAdd.addEventListener('click', () => {
words.push(input.value);
input.value = '';
addWords();
});
let findLong = document.querySelector('button');
findLong.addEventListener('click', () => {
let longestCt = 0;
let longestWord = "";
words.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value;
longestCt = value.length;
} else {
longestWord = longestWord;
}
});
//}
});
document.getElementById("demo2").innerHTML = longestWord;div {
widows: 20%;
margin: auto;
}
input, button {
padding: 5px;
display: inline-block;
}
li {
font-size: 20px;
font-weight: bold;
margin-left: -40px;
list-style: none;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="test_Arr_Input.css">
<title>Test Longest Array.html</title>
</head>
<body>
<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->
<div>
<input type="text">
<button>Add a Word</button>
<ul></ul>
<br>
<button>Find the Longest</button>
<p id="demo"></p>
</div>
<script type="text/javascript" src="test_Arr_Input.js"></script>
</body>
</html>Full disclosure; Beginner. With that said; thank you in advance.
I have written a simple JavaScript to return the longest string in an array. Here it is as simply a JavaScript function, that I ran from the console, without interacting with the html:
var myList = ['Loops','are','used','while','Learning JavaScript'];
var longestCt = 0;
var longestWord = "";
myList.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value; longestCt = value.length;
} else {
longestWord = longestWord;
}
});
console.log(longestWord);
I then endeavored to create an HTML page to enter objects into the array and to create a list. (Thanks to KodeBase from Youtube for the direction). The JavaScript for this is posted at the end after the CSS. Here is the HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="test_Arr_Input.css">
<title>Test Longest Array.html</title>
</head>
<body>
<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->
<div>
<input type="text">
<button>Add a Word</button>
<ul></ul>
<br>
<button>Find the Longest</button>
<p id="demo"></p>
</div>
<button onclick="intoMyList()">Submit to the array</button>
<p id="demo"></p>
<button onclick="findTheLongest()">Find the Longest Word</button>
<p id="demo2"></p>
<script type="text/javascript" src="test_Arr_Input.js"></script>
</body>
</html>
Here is the CSS:
div {
widows: 20%;
margin: auto;
}
input, button {
padding: 5px;
display: inline-block;
}
li {
font-size: 20px;
font-weight: bold;
margin-left: -40px;
list-style: none;
}
And here is the final JavaScript:
let words = [];
function addWords() {
let template = words.map(word => `<li>${word}</li>`).join('\n');
document.querySelector('ul').innerHTML = template;
}
addWords();
let btnAdd = document.querySelector('button');
let input = document.querySelector('input');
btnAdd.addEventListener('click', () => {
words.push(input.value);
input.value = '';
addWords();
});
let findLong = document.querySelector('button');
findLong.addEventListener('click', () => {
//function findTheLongest() {
let longestCt = 0;
let longestWord = "";
myList.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value;
longestCt = value.length;
} else {
longestWord = longestWord;
}
});
//}
});
document.getElementById("demo2").innerHTML = longestWord;
First I changed a few variable names for more clarity.
But the issue is, although I am able to get the words to enter the array by clicking the first button, the second button does not seem to call the ForEach function to trigger the return of the longest word. I am wondering if I need to somehow differentiate between button 1 and 2 in the HTML. Or if I just need to go back to the drawing board to rethink my understanding of the way I am putting the JS together.