Button Moves Weirdly when text is filled in - javascript

That is the missalignmentSo, I wanted to program TicTacToe on a Webpage, using plain JavaScript, HTML, and CSS. I've made some logic, so the board can update based on the entries in an array, but when I do that, the buttons aren't in a line anymore, and it looks really bad.
Expected result: Text gets filled into the button, the button remains at its place.
Actual Result: Text gets filled in but the button moves down.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="scripts.js"></script>
<title>My Website</title>
</head>
<body>
<div id="board">
<div id="row1">
<button class="field"> </button>
<button class="field"> </button>
<button class="field"> </button>
</div>
<div id="row2">
<button class="field"> </button>
<button class="field"> </button>
<button class="field"> </button>
</div>
<div id="row3">
<button class="field"> </button>
<button class="field"> </button>
<button class="field"> </button>
</div>
</div>
</body>
</html>
CSS:
.field{
display: inline-block;
border-style: solid;
background-color: white;
height: 100px;
width: 100px;
font-size: 10px;
}
#board {
margin-left: 40%;
margin-top: 20%;
height: 50%;
}
JS:
function game() {
this.board = [
" ", "x ", " ",
" ", " ", " ",
" ", " ", " x"
]
this.printBoard = function(buttons) {
for(i = 0; i < buttons.length; i++) {
buttons[i].innerHTML = this.board[i];
}
}
}
window.onload = function() {
let buttons = document.getElementsByClassName("field");
let myGame = new game();
myGame.printBoard(buttons);
}


You need to have some control at the rows. Try display: flex at the #row1, #row2, #row3


class game {
fig = {x: "⭕", o: "❌"};
board = Array(9).fill("");
el = document.querySelector("#board");
constructor() {
this.printBoard();
}
printBoard(){
this.el.innerHTML = this.board.reduce((h, f) => h + `<button>${this.fig[f]||""}</button>`, "");
}
};
const myGame = new game();
myGame.board[0] = "x";
myGame.board[8] = "o";
myGame.printBoard();
#board {
display: flex;
flex-flow: row wrap;
width: 50vh;
height: 50vh;
}
#board > button {
flex-grow: 1;
--margin: 0vh; /* Set a desired value */
width: calc(33.333% - var(--margin) * 2);
margin: var(--margin);
border: 0;
box-shadow: 0 0 0 0.5px #000;
background-color: white;
font-size: 10vh;
line-height: 0;
cursor: pointer;
transition: background 0.3s;
}
#board > button:hover {
background: #0bf;
}
<div id="board"></div>

Related

I am getting a file not found undefined Error in Jquery

Hello I am creating a game similar to Simon. Where a user has to memorize a random color generated by the random color generator. When a button is clicked it is supposed to play a sound. I am able to play all the sounds when I click the buttons. I created a function that recognizes when the enter key is pressed to start the game. The game generates a random color with a corresponding sound and the user is supposed to click the same color. I am getting a ERROR NOT FOUND sounds/undefined.mp3 and also a DOM Exception: no supported source was found. It seems not to be able to find the right file.
function nextSequence() {
level = level + 1;
randomNumber = Math.floor(Math.random * 4);
randomChosenColor = buttonColors[randomNumber];
gamePattern.push(randomChosenColor);
console.log(gamePattern);
//$("#" + randomChosenColor).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
animatePress(randomChosenColor);
playSound(randomChosenColor);
// animatePress(randomChosenColor);
}
$(".btn").click(function() {
var userChosenColor = $(this).attr("id");
userClickedPattern.push(userChosenColor);
console.log(userClickedPattern);
playSound(userChosenColor);
animatePress(userChosenColor);
});
function playSound(variable) {
$("#" + variable).ready(function() {
var audio = new Audio("sounds/" + variable + ".mp3");
audio.play();
});
}
$(document).on('keypress', function(e) {
if(e.which == 13) {
var h1header = document.getElementById("level-started").innerHTML = "Level " + level;
nextSequence();
started = true;
}
});
h1 {
text-align: center;
margin-bottom: 5%;
font-family: "Ubuntu";
font-size: 3rem;
}
body {
text-align: center;
}
.container {
width: 50%;
margin: auto;
}
.btn {
display: inline-block;
width: 200px;
height: 200px;
border: 10px solid black;
border-radius: 6%;
margin: 25px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;900&family=Ubuntu:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="intro" id = "level-started">Press Enter Key to start </h1>
<div class="container">
<div class="row">
<div class="btn green" type="button" id="green">
</div>
<div class="btn red" type="button" id="red">
</div>
</div>
<div class="row">
<div class="btn yellow" type="button" id="yellow">
</div>
<div class="btn blue" type="button" id="blue">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js">
</script>
</body>
<footer>&copy Hello World </footer>
</html>

Button displays only last note in my note taker app

const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
im trying to make note taker app and each time i add the note and click the view detail button
it shows me only the content of last item added regardless of which one i press i dont know how to write with loop or forEach method i tried it but i failed can anyone explain what to do here im a begginer JS
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
popuptext.innerHTML = html
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I dont really know many methods so i just use one way im stuck on this project for 4 days
CSS
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}

On popuptext.innerHTML = html line you are making the mistake, so what is happening is you are setting the innerHTML of popuptext as variable html, so this line tries find html variable and goes to part of this code,
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
and then it finds the HTML variable here, however the value of this html variable will be whatever you have set it to earlier, so if you add three notes then the value of the html variable will be innerhtml of the latest/last note that you added.
To fix that I have made a change as popuptext.innerHTML = e.target.parentElement.innerHTML, this line makes sure that whatever element you are clicking that element's associated innerhtml is added to the popup.
const adder = document.querySelector('.adder')
const gridcont = document.querySelector('.gridbox')
const text = document.querySelector('p')
const button = document.querySelector('.button')
const popup = document.querySelector('.popup-wrapper')
const popuptext = document.querySelector('.popup-content')
const close = document.querySelector('.popup-close')
const notecard = document.querySelector('.card')
const notetext = document.querySelector('.card-text')
const pi = document.querySelector('p')
let counter = 0;
let html;
let note;
let html2
/*close.addEventListener('click', e =>{
popup.style.display ='none'
}) */
popup.addEventListener('click', e=>{
popup.style.display ='none'
})
const template = note =>{
html = `<div class="card">
<div class="card-body">
<h5 class="card-title">Note ${counter}</h5>
<p class="card-text">${note.substring(0,6)}...<span class="only-popup">${note}</span></p>
<button class="button" type="button">view detail</button>
</div>
</div>`
gridcont.innerHTML += html
}
adder.addEventListener('submit', e =>{
e.preventDefault()
note = adder.add.value
if(note.length){
counter++
template(note)
adder.reset()
}
})
gridcont.addEventListener('click', e =>{
if(e.target.classList.contains('button')){
popup.style.display = 'block'
let temp = `<div class="card">
<div class="card-body">
<h5 class="card-title">${e.target.parentElement.querySelector('.card-title').innerText}</h5>
<p class="card-text">${e.target.parentElement.querySelector('.only-popup').innerText}</p>
<button class="button" type="button">view detail</button>
</div>
</div>`
popuptext.innerHTML = temp
}
});
.card{
margin-left: 2rem;
margin-top: 2rem;
}
.form-control{
max-width: 500px;
}
.blu{
color: blue;
}
.gridbox{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.button{
color:white;
background-color: rgb(41, 41, 241);
border-color: rgb(41, 41, 241);;
}
.card-text{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.popup-wrapper{
display: none;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup{
font-family: arial;
text-align: center;
width: 100%;
max-width: 500px;
margin: 10% auto;
padding: 20px;
background: white;
position: relative;
}
.popup-close{
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.only-popup{
display:none;
}
.card-text-show{
overflow: unset;
text-overflow: unset;
max-width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Note taker</title>
</head>
<body>
<div class="head text-center">
<header>
<h1>Note taker app</h1>
<h8 class="blu">add note:</p>
</header>
<form class="adder">
<input class="form-control m-auto" type="text" name="add" placeholder="Enter your note here">
</form>
</div>
<div class="gridbox">
</div>
<div class="popup-wrapper">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

Trying to rotate images from an array through a DOM element

I am trying to make a simple slide show by changing the pics in a DOM element.
Here is the HTML and the JavaScript..
The pics do NOT show up
What am I missing ?
here is the HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<img id="pictures" style = "width:50%">
<div>
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
Here is the JavaScript Part
function slideshow(){
'use strict';
let i = 0;
// array to hold the pictures
let pics = [];
pics [0] = cave.jpg;
pics [1] = creek.jpg;
pics [2] = entrance.jpg;
pics [3] = tree.jpg;
// making the pictures the dom element
document.getElementById('pictures').value = pics[i];
// make the buttons rotate through the pics
document.getElementById('forward').onclick = i++;
document.getElementById('reverse').onclick = i--;
}
window.onload = init;
Any pointers would be most appriciated.

Few things are missing in your solution, so feel free to run and inspect the code below. Also, put images in HTML at the beginning. JS code running is making sure they are changing the order. Only the middle one is passing through the window (#pictures-container) - this code works only for the odd number of images.
Here's the code that will work:
HTML (index.html)
<html>
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pictures-container">
<div id="pictures">
<img class="picture" alt="pic 1" data-id="1">
<img class="picture" alt="pic 2" data-id="2">
<img class="picture" alt="pic 3" data-id="3">
</div>
</div>
<div id="slideshow-actions">
<button type="button" id="reverse">Reverse</button>
<button type="button" id="forward">Forward</button>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
CSS (css/style.css)
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
}
#pictures-container {
width: 110px;
height: 90px;
border: 1px solid red;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#pictures {
display: flex;
gap: 5px;
z-index: -1;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.picture {
width: 100px;
height: 80px;
display: block;
padding: 5px;
background-color: #dedede;
}
.picture[data-id="1"] {
background-color: yellow;
}
.picture[data-id="2"] {
background-color: magenta;
}
#slideshow-actions {
margin-top: 15px;
}
JS (js/script.js)
function registerEvents() {
let btnReverse = document.getElementById('reverse');
let btnForward = document.getElementById('forward');
btnReverse.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let firstPic = pictures[0];
let parent = firstPic.parentElement;
parent.removeChild(firstPic);
parent.append(firstPic);
}
btnForward.onclick = () => {
let pictures = document.querySelectorAll('.picture');
let lastPic = pictures[pictures.length - 1];
let parent = lastPic.parentElement;
parent.removeChild(lastPic);
parent.prepend(lastPic);
}
}
registerEvents();

Password Generator does not work until I move slider

Problem: My password generator will not work until I move my slider. However, I would like the value to default to 8. So if someone loads page, and clicks generate PW, a random pw of 8 would populate.
//generate a password function
function passwordGenerator () {
// Length of the password?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!##$%^&*()";
// defining password
var password = "";
// creating a loop to choose password
for (var i = 1; i <= passwordLength; i++) {
password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length -1)));
}
// adding the password to the content area
document.getElementById('display').value = password;
}
// adjust value when moving slider
function sliderMove(){
document.getElementById('num').value = document.getElementById('slider1').value;
document.getElementById('num').textContent = document.getElementById('num').value;
}
//copy to clipboard
function selectText() {
const input = document.getElementById('display');
input.focus();
input.select();
document.execCommand('copy')
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
}
.backgroundGray {
background-color: lightgray;
width: 100%;
height: 500%;
}
.passwordBox {
width: 500px;
height: 200px;
text-align: center;
}
body {
height: 100%;
background-color: lightgray;
}
.headText {
padding: 50px;
}
.buttonOnClick {
margin: 20px;
}
.passGenButton {
color: white;
background-color: red;
margin-right: 15%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 15%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
textarea {
padding: 20px;
font-size: 19px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
#media (max-width: 537px) {
.passGenButton {
color: white;
background-color: red;
margin-right: 1%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 1%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
.passwordBox {
width: 400px;
height: 200px;
text-align: center;
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
padding-left: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
<title>Random Password Generator</title>
</head>
<body>
<div class="conatiner backgroundGray">
<div class="row">
<div class="col-12">
<div class="topText">
<!-- Header -->
<h1 class="text-center text-dark headText">Password Generator</h1>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-sm-12 text-center">
<div class="content backgroundWhite">
<!-- Sub Header -->
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<p>Select PW Length</p>
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()"
class="robClass">
<span id="num">8</span>
</div>
<br />
<!-- Password Box -->
<textarea class="passwordBox" type="text" id="display"
placeholder="Your Secure Password"></textarea>
<br />
<button onclick="passwordGenerator()" class="passGenButton buttonOnClick">Generate
Password</button>
<button class="buttonOnClick copyButton" defaultValue="8" onclick="selectText()">Copy to
clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have played with HTML and JS. I have tried to create a var num = 8;
no luck.
Does anyone have any ideas on how I can do this?

At the start of your passwordGenerator function:
var passwordLength = document.getElementById('num').value;
This element (<span id="num">8</span>) doesn't have a value attribute, so your function will try to generate a password with a length equal to undefined.
You should get the value from your slider instead:
var passwordLength = document.getElementById('slider1').value;
You can also simplify your function sliderMove function:
function sliderMove() {
document.getElementById('num').textContent = document.getElementById('slider1').value;
}

Issue with dynamic and text placement

What I am trying to do is when I click the submit button it puts all the name and first name in large text into the div contactcard1 , when they click see description it switches to contactcard2, I need the info for description to show in contactcard2, as well as every time the info gets submitted on the left it makes a new box dynamically on the page that does the same as the contact 1 and 2 box. I have got most of this working but can't seem to get those functions working. I did get document.on turned on so i can use the features. But would appropriate any help in getting this fixed.
My HTML
!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"></style>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#tabletop');
$('.button').click(function() {
var row = tabletop.insertRow();
['1stname', '2ndname', '3rdname', '4thname'].forEach(function(elementId) {
var cell = row.insertCell();
cell.innerHTML = document.getElementById(elementId).value;
});
});
});
function switchVisible() {
if (document.getElementById('contactcard1') !== undefined) {
if (document.getElementById('contactcard1').style.display == 'block') {
document.getElementById('contactcard1').style.display = 'none';
document.getElementById('contactcard2').style.display = 'block';
} else {
document.getElementById('contactcard1').style.display = 'block';
document.getElementById('contactcard2').style.display = 'none';
}
}
}
$('button').append('#maindiv')
$(document).on()
</script>
</head>
<body>
<div id='wrapper'>
<div id='container1'></div>
<div id=maindiv>
<div id='container2'>
<form id='form1'>
First name:<br>
<input id='1stname' type="text" name="firstname" value="First Name">
<br> Last name:<br>
<input id='2ndname' type="text" name="lastname" value="Last Name">
<br> Description:<br>
<input id='3rdname' type="text" name="description" value="Description">
</form>
<button class='button'>Submit</button>
</div>
<div id='container3'>
<div id='contactcard1'>
<table id='tabletop'>
<tr>
<th id='first'>First Name</th>
<th id='last'>Last Name</th>
<input id="Button1" type="button" value="See My Description" onclick="javascript:switchVisible();" />
</tr>
</table>
</div>
<div id='contactcard2'>
<table id='tabletop1'>
<tr>
<th id='description'>Description</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
MY CSS
*
#wrapper{
width: 800px;
margin: 0 auto;
overflow: hidden;
border: 1px solid black ;
}
#container1{
width: 800px;
height: 100px;
display: inline-block;
border: 1px solid black ;
}
#container2{
width: 200px;
height: 500px;
display: inline-block;
border: 1px solid black ;
margin: 0 auto;
}
#container3{
width: 580px;
height: 500px;
display: inline-block;
border: 1px solid black ;
vertical-align: top;
}
#form1{
margin-top: 100px;
}
#contactcard1{
width: 350px;
height: 150px;
display: inline-block;
border: 1px solid black;
margin-left: 100px;
}
#contactcard2{
width: 350px;
height: 150px;
display: none;
border: 1px solid black;
margin-left: 100px;
}
#button1{
vertical-align: bottom;
}

There are a lot of thing you need to do here.
I created a fiddle for you as a working version. Take a look and let me know if you don't understand.
https://jsfiddle.net/0433Lo2u/
$(document).ready(function() {
document.getElementById('contactcard1').style.display = 'block';
$('.button').click(function() {
var row = undefined;
if (document.getElementById('contactcard1').style.display == 'block') {
row = tabletop.insertRow();
}else{
row = tabletop1.insertRow();
}
['1stname', '2ndname', '3rdname'].forEach(function(elementId) {
var cell = row.insertCell();
cell.innerHTML = document.getElementById(elementId).value;
});
});
$('#Button1').click(function(){
if (document.getElementById('contactcard1') !== undefined) {
if (document.getElementById('contactcard1').style.display == 'block') {
document.getElementById('contactcard1').style.display = 'none';
document.getElementById('contactcard2').style.display = 'block';
} else {
document.getElementById('contactcard1').style.display = 'block';
document.getElementById('contactcard2').style.display = 'none';
}
}
})
});

Categories