I'm playing around with the password generator, but when the string contains a < or > it breaks the HTML and only outputs some of the characters. I'm using innerHTML instead on textContent because I need to wrap each password in a div. Is there another way I can do this without it breaking?
const alphabetUppercase = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split('');
const alphabetLower = "abcdefghijklmnopqrstuvwxyz".split('');
const symbols = "!@#$%^&*(>)_+=-`~,./;'[]\|}\"<{:\?".split('');
const numbers = "123456789".split('');
const masterArray = alphabetUppercase.concat(alphabetLower, symbols, numbers);
const passwordButton = document.querySelector('.generate-passwords');
const outputPasswords = document.querySelector('.output-passwords');
passwordButton.addEventListener('click', function(e){
e.preventDefault();
let passwordArray = [];
// number of passwords
let counter = 4;
// Reset text content
outputPasswords.innerHTML = '';
for (let x = 0; x < counter; x++) {
let randomPassword = "";
for (let i = 0; i < 15; i++) {
let randomOutput = Math.floor(Math.random() * masterArray.length);
randomPassword += masterArray[randomOutput];
}
passwordArray.push(randomPassword);
outputPasswords.innerHTML += '<div>' + passwordArray[x] + '</div>';
}
}); <section class="generator">
<a href="#" class="generate-passwords">Generate passwords</a>
<div class="output-passwords"></div>
</section>You can do something like this:-
const div = document.createElement('div');
div.append(randomPassword);
outputPasswords.append(div);
Instead of using div as a string, create an element "div" and then append it to the parent "outputPasswords" element