Develop Reference

Connect generated divs by a dynamic line

I have a button that generates a div, and inside of that div, there is another button to generate another div, either a "method" div, or an "instance variable" div.
When one of those is generated from that main div, I want a line to be pointing between them. The divs are draggable, so I want the line to move when the divs move also.
I attempted to use leaderline.js to generate a line when they are created using the div ids, but it did not show up, and I tried to read more about it, but the documentation didn't fix my issue, as I tried what it said by using this:
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
Replacing the ids with my actual ids when the div was generated, but it didn't work. Any help would be appreciated.
Code:
var generatedCode = "";
var classNameCode = {};
var classVariables = {};
var variableName = "";
var amtVars = 0;
document.getElementById("create-box").addEventListener("click", function() {
amtVars = 0;
var methodCount = 0;
let box = document.createElement("div");
box.classList.add("box");
let title = document.createElement("h2");
title.innerHTML = "Class";
box.appendChild(title);
let classTitle = document.createElement('input');
classTitle.classList.add('class-name-form');
let classTitleBtn = document.createElement('button');
classTitleBtn.innerText = "Set Class Name";
classTitleBtn.classList.add('class-name-btn');
box.appendChild(classTitle);
box.appendChild(classTitleBtn);
document.getElementById("box-container").appendChild(box);
let createSubclassButton = document.createElement("button");
createSubclassButton.innerHTML = "Add Method";
box.appendChild(createSubclassButton);
let createInstanceVariable = document.createElement('button');
createInstanceVariable.classList.add('add-variable');
createInstanceVariable.innerHTML = "Add instance variable";
box.appendChild(createInstanceVariable);
// Enable resizing and dragging
box.addEventListener("mousedown", startDrag);
box.addEventListener("mousemove", drag);
box.addEventListener("mouseup", endDrag);
box.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
createInstanceVariable.addEventListener('click', function() {
let instanceVar = document.createElement('div');
instanceVar.classList.add('instance-var');
let instanceTitle = document.createElement('h2');
instanceTitle.innerText = `Variable`;
instanceVar.append(instanceTitle);
let varName = document.createElement('input');
varName.classList.add('varName-form');
varName.placeholder = "Set variable name";
instanceVar.append(varName);
let varNameBtn = document.createElement('button');
varNameBtn.innerText = "Set Variable Name";
varNameBtn.classList.add('var-name-btn');
instanceVar.append(varNameBtn);
let varType = document.createElement('input');
varType.placeholder = 'Specify variable type';
varType.classList.add('variable-type-form');
let varTypeBtn = document.createElement('button');
varTypeBtn.innerText = "Set variable type";
varTypeBtn.classList.add('method-type-btn');
instanceVar.appendChild(varType);
instanceVar.appendChild(varTypeBtn);
document.getElementById("box-container").appendChild(instanceVar);
instanceVar.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
instanceVar.style.top = box.offsetTop + 'px';
instanceVar.addEventListener("mousedown", startDrag);
instanceVar.addEventListener("mousemove", drag);
instanceVar.addEventListener("mouseup", endDrag);
instanceVar.addEventListener("mouseleave", endDrag);
varNameBtn.addEventListener('click', function() {
variableName = varName.value;
instanceTitle.innerText = `Variable ${variableName}`;
});
varTypeBtn.addEventListener('click', function() {
if(amtVars === 0){
classNameCode[classTitle.value] += `\n\tprivate: \n\t\t${varType.value} ${variableName};\n`;
amtVars++;
} else{
classNameCode[classTitle.value] += `\n\t\t${varType.value} ${variableName};\n`;
}
});
});
createSubclassButton.addEventListener("click", function() {
let subBox = document.createElement("div");
subBox.classList.add("subbox");
let subTitle = document.createElement("h2");
subTitle.innerText = `Method`;
subBox.append(subTitle);
let methodTitle = document.createElement('input');
methodTitle.classList.add('method-name-form');
methodTitle.placeholder = 'Set method name'
let methodTitleBtn = document.createElement('button');
methodTitleBtn.innerText = "Set Method Name";
methodTitleBtn.classList.add('method-name-btn');
subBox.appendChild(methodTitle);
subBox.appendChild(methodTitleBtn);
let returnType = document.createElement('input');
returnType.placeholder = 'Specify return type';
returnType.classList.add('method-return-type-form');
let returnTypeBtn = document.createElement('button');
returnTypeBtn.innerText = "Set return type";
returnTypeBtn.classList.add('method-return-type-btn');
subBox.appendChild(returnType);
subBox.appendChild(returnTypeBtn);
document.getElementById("box-container").appendChild(subBox);
subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
subBox.style.top = box.offsetTop + 'px';
subBox.addEventListener("mousedown", startDrag);
subBox.addEventListener("mousemove", drag);
subBox.addEventListener("mouseup", endDrag);
subBox.addEventListener("mouseleave", endDrag);
methodTitleBtn.addEventListener('click', function() {
console.log(methodTitle.value);
subTitle.innerText = `Method ${methodTitle.value}`;
});
returnTypeBtn.addEventListener('click', function() {
console.log(returnType.value);
if (methodCount === 0) {
classNameCode[classTitle.value] += `\tpublic:\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
methodCount++;
amtVars = 0;
} else {
classNameCode[classTitle.value] += `\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
amtVars = 0;
}
});
});
classTitleBtn.addEventListener("click", function() {
console.log(classTitle.value);
// generatedCode = `class ${classTitle.value} {\n\t`
title.innerHTML = `Class ${classTitle.value}`;
classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
});
});
// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');
btn.onclick = function() {
modal.style.display = "block";
modalContent.innerText = "";
console.log(classNameCode);
if (Object.keys(classNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var key in classNameCode) {
var codeToAppend = `${classNameCode[key]} \n}`;
console.log(codeToAppend);
modalContent.innerText += codeToAppend;
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
background-color: darkgray;
}
#create-box {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-box:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-box:active{
cursor:pointer
}
.box {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.box h2 {
margin: 0;
padding: 10px;
}
.subbox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
white-space: pre;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#myBtn{
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#myBtn:hover{
background-color: #5dc861;
cursor: pointer;
}
#myBtn:active{
cursor:pointer
}
#buttons{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.class-name-form{
border-radius: 5px;
border: 1px solid black;
}
button{
border-radius: 5px;
border: none;
background-color: rgb(170, 207, 207);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(198, 224, 224);
}
button:active{
cursor: pointer;
}
.instance-var{
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<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 rel="stylesheet" href="./static/styles.css">
<title>Program Visualizer And Generator</title>
</head>
<body>
<div id="buttons">
<button id="create-box">Create Class</button>
<button id="myBtn">View Code (C++)</button>
</div>
<div id="box-container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<code></code>
</div>
</div>
<script src="./functionality/main.js"></script>
</body>
</html>

I can't convert .duration or .currentTime to MM:SS in java script

since I don't know JavaScript I downloaded an audio player and changed the html and CSS but the audio player shows audio duration in seconds and; I tried to look for results in google but that did not work as well, I even tried to copy code from other audio players but it did not work. I would be happy if anyone help me.
thanks...
$(document).ready(function() {
var timeDrag = false; /* Drag status */
var isPlaying = false;
var theSound = $("#firstTrack");
var allIcons = $("i");
var isLoaded = false;
theSound.on("timeupdate", function() {
var currentPos = theSound[0].currentTime; //Get currenttime
var maxduration = theSound[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage + '%');
$("#getTime").html(Math.floor(theSound[0].duration));
$('#goTime').html(Math.floor(theSound[0].currentTime));
});
$("#playIt").click(function(event) {
// run once.
if (!isLoaded) {
theSound.trigger('load');
setTimeout(startBuffer, 500);
isLoaded = true;
}
// toggle play/pause
if (!isPlaying) {
theSound.trigger('play');
$("#playIt").find(allIcons).removeClass("fa-play");
$("#playIt").find(allIcons).addClass("fa-pause");
isPlaying = true;
} else {
theSound.trigger('pause');
$("#playIt").find(allIcons).removeClass("fa-pause");
$("#playIt").find(allIcons).addClass("fa-play");
isPlaying = false;
}
});
$("#stepFive").click(function() {
var currentPos = theSound[0].currentTime + 5;
theSound[0].currentTime = currentPos;
});
$("#stepFiveback").click(function() {
var currentPos = theSound[0].currentTime - 5;
theSound[0].currentTime = currentPos;
});
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if (timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if (timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = theSound[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage + '%');
theSound[0].currentTime = maxduration * percentage / 100;
};
//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = $("#firstTrack")[0].duration;
var currentBuffer = $("#firstTrack")[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage + '%');
//re-loop if not entierely buffered
if (currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
});
#charset "utf-8";
/*head*/
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #1e1f1f;
max-height: 100vh;
/* change here */
}
/* -- */
.noPad {
padding: 0;
}
.playBar {
transition: all 0.5s ease;
height: 10px;
background-color: rgba(186, 44, 44, 0.59);
/*border: 1.5px;*/
/*border-color: black;*/
/*border-style: inset;*/
opacity: 0.85;
width: 0;
}
#audioCtrl>div {
margin: 0;
padding: 0;
}
.progressBar {
position: relative;
width: 100%;
height: .4em;
backgroud-color: #474848;
color: #474848;
scroll-behavior: smooth;
border: solid;
border-color: #474848;
border-width: 1px;
border-radius: 5px;
}
.timeBar {
transition: all 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #8c8d8e;
border-radius: 5px;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #474949;
opacity: 0.5;
border-radius: 5px;
}
/* -- */
.row {
/* background-color: #535252; */
border-radius: 10px;
}
.img-container img {
margin-top: 10em;
border-radius: 15px;
height: 22em;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.info1 {}
.title {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1.7em;
margin: 0;
padding-bottom: .4em;
margin-left: .2em;
color: #f1f1f1;
}
.time-btn {
float: right;
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-right: .3em;
}
.time-btn2 {
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-left: .2em;
}
.btn {
background-color: #1e1f1f;
color: #D7D7D7;
border: 0;
font-size: 2.2em;
padding: .3em .7em;
}
.btn-big {
color: #FFFFFF;
font-size: 2.4em;
}
.btn:focus {
border: 0;
}
.scrollformore {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1em;
margin-top: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>audio_player_2</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/aistyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="simple_player.js"></script>
<div class="container-fluid"><audio id="firstTrack" width="100%" preload="none">
<source src="https://www.bensound.com/bensound-music/bensound-ukulele.mp3" type="audio/mpeg" />
</audio>
<div class="img-container"><img src="https://www.bensound.com/bensound-img/ukulele.jpg" alt="cover"></div>
<h2 class="title info1">Ukulele</h2>
<div class="row" id="audioCtrl">
<div class="col-xs-3 progressBar">
<div class="bufferBar"></div>
<div class="timeBar"></div>
</div>
<div class="col-xs-3"><button class="time-btn info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="getTime"><div class="durationTime">00</div></span></i></button></div>
<div class="col-xs-3"><button class="time-btn2 info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="goTime"><div class="currentTime">00</div></span></i></button></div>
<div class="navigation">
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFiveback" type="button"> <i class="fa fa-backward"> <span class="hidden-xs"></span></i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb btn-big" id="playIt" type="button"> <i class="fa fa-play"> </i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFive" type="button"> <i class="fa fa-forward"> <span class="hidden-xs"></span></i></button></div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/simple_player.js"></script>
</body>
</html>
strong text

You will want to add a function to help convert all the Seconds to Minutes and Seconds.
Consider the following Example.
function convertSeconds(sec) {
var m = Math.floor(sec / 60);
var s = sec % 60;
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
This get the calculated Minutes and Seconds from a total number of Seconds using Division and Modulus. It may look like this in use:
$(document).ready(function() {
var timeDrag = false; /* Drag status */
var isPlaying = false;
var theSound = $("#firstTrack");
var allIcons = $("i");
var isLoaded = false;
function convertSeconds(sec) {
var m = Math.floor(sec / 60);
var s = sec % 60;
return (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}
theSound.on("timeupdate", function() {
var currentPos = theSound[0].currentTime; //Get currenttime
var maxduration = theSound[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage + '%');
$("#getTime").html(convertSeconds(Math.floor(theSound[0].duration)));
$('#goTime').html(convertSeconds(Math.floor(theSound[0].currentTime)));
});
$("#playIt").click(function(event) {
if (!isLoaded) {
theSound.trigger('load');
setTimeout(startBuffer, 500);
isLoaded = true;
}
if (!isPlaying) {
theSound.trigger('play');
$("#playIt").find(allIcons).removeClass("fa-play");
$("#playIt").find(allIcons).addClass("fa-pause");
isPlaying = true;
} else {
theSound.trigger('pause');
$("#playIt").find(allIcons).removeClass("fa-pause");
$("#playIt").find(allIcons).addClass("fa-play");
isPlaying = false;
}
});
$("#stepFive").click(function() {
var currentPos = theSound[0].currentTime + 5;
theSound[0].currentTime = currentPos;
});
$("#stepFiveback").click(function() {
var currentPos = theSound[0].currentTime - 5;
theSound[0].currentTime = currentPos;
});
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if (timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if (timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = theSound[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage + '%');
theSound[0].currentTime = maxduration * percentage / 100;
};
//loop to get HTML5 video buffered data
var startBuffer = function() {
var maxduration = $("#firstTrack")[0].duration;
var currentBuffer = $("#firstTrack")[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage + '%');
//re-loop if not entierely buffered
if (currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
});
#charset "utf-8";
/*head*/
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #1e1f1f;
max-height: 100vh;
/* change here */
}
/* -- */
.noPad {
padding: 0;
}
.playBar {
transition: all 0.5s ease;
height: 10px;
background-color: rgba(186, 44, 44, 0.59);
/*border: 1.5px;*/
/*border-color: black;*/
/*border-style: inset;*/
opacity: 0.85;
width: 0;
}
#audioCtrl>div {
margin: 0;
padding: 0;
}
.progressBar {
position: relative;
width: 100%;
height: .4em;
backgroud-color: #474848;
color: #474848;
scroll-behavior: smooth;
border: solid;
border-color: #474848;
border-width: 1px;
border-radius: 5px;
}
.timeBar {
transition: all 0.5s ease;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #8c8d8e;
border-radius: 5px;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #474949;
opacity: 0.5;
border-radius: 5px;
}
/* -- */
.row {
/* background-color: #535252; */
border-radius: 10px;
}
.img-container img {
margin-top: 10em;
border-radius: 15px;
height: 22em;
}
.navigation {
display: flex;
align-items: center;
justify-content: center;
}
.info1 {}
.title {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1.7em;
margin: 0;
padding-bottom: .4em;
margin-left: .2em;
color: #f1f1f1;
}
.time-btn {
float: right;
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-right: .3em;
}
.time-btn2 {
margin-top: .3em;
background-color: #1E1F1F;
color: aliceblue;
border: 0;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 1em;
margin-left: .2em;
}
.btn {
background-color: #1e1f1f;
color: #D7D7D7;
border: 0;
font-size: 2.2em;
padding: .3em .7em;
}
.btn-big {
color: #FFFFFF;
font-size: 2.4em;
}
.btn:focus {
border: 0;
}
.scrollformore {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1em;
margin-top: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
<div class="container-fluid">
<audio id="firstTrack" width="100%" preload="none">
<source src="https://www.bensound.com/bensound-music/bensound-ukulele.mp3" type="audio/mpeg" />
</audio>
<div class="img-container"><img src="https://www.bensound.com/bensound-img/ukulele.jpg" alt="cover"></div>
<h2 class="title info1">Ukulele</h2>
<div class="row" id="audioCtrl">
<div class="col-xs-3 progressBar">
<div class="bufferBar"></div>
<div class="timeBar"></div>
</div>
<div class="col-xs-3"><button class="time-btn info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="getTime"><div class="durationTime">00:00</div></span></i></button></div>
<div class="col-xs-3"><button class="time-btn2 info1" type="timebar"> <i class="fas fa-refresh"> <span class="hidden-xs" id="goTime"><div class="currentTime">00:00</div></span></i></button></div>
<div class="navigation">
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFiveback" type="button"> <i class="fa fa-backward"> <span class="hidden-xs"></span></i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb btn-big" id="playIt" type="button"> <i class="fa fa-play"> </i></button></div>
<div class="col-xs-3"><button class="btn btn-default blackb" id="stepFive" type="button"> <i class="fa fa-forward"> <span class="hidden-xs"></span></i></button></div>
</div>
</div>
</div>
</div>

Try this:
export function timeFormat(d: number) {
const duration = Math.floor(d);
const h = Math.floor(duration / 3600);
const m = Math.floor((duration - h * 3600) / 60);
const s = duration % 60;
const H = h === 0 ? '' : `${h}:`;
const M = m < 10 ? `0${m}:` : `${m}:`;
const S = s < 10 ? `0${s}` : `${s}`;
return H + M + S;
}

Get selected value from div dropdown

I have a dropdown from which I want to find the selected value.
The dropdown is basically a big blue button which, when pressed, shows different customers:
When an option is clicked, the value changes to the selected customer.
What I want to do is access this value somewhere else in my HTML script.
var Klanten = [
'niet-declareerbaar',
'ING',
'NNPC',
'Meewind',
];
var Projects = [
'alm',
'risicobeheer',
'RQ',
'overige',
];
var Tarieven = [
'standaard tarief',
'korting (50%)',
'Cadeau',
]
var project = 'overig';
var Tarief = 'standaard tarief';
var startYear = 2000;
var endYear = 2020;
var klant = 0;
var year = 0;
var selectedDays = new Array();
var mousedown = false;
var mousemove = false;
function loadKlanten() {
for (var i = 0; i < Klanten.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Klanten[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedKlant = i;
return function () {
klant = selectedKlant;
document.getElementById('curKlant').innerHTML = Klanten[klant];
loadCalendarDays();
return klant;
};
})();
document.getElementById('Klanten').appendChild(doc);
}
}
function loadProjects() {
document.getElementById('Projects').innerHTML = '';
for (var i = 0; i < Projects.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Projects[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedProject = i;
return function () {
project = selectedProject;
document.getElementById('curProject').innerHTML = Projects[project];
loadProjects();
return project;
};
})();
document.getElementById('Projects').appendChild(doc);
}
}
function loadTarief() {
document.getElementById('Tarieven').innerHTML = '';
for (var i = 0; i < Tarieven.length; i++) {
var doc = document.createElement('div');
doc.innerHTML = Tarieven[i];
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedTarief = i;
return function () {
Tarief = selectedTarief;
document.getElementById('curTarief').innerHTML = Tarieven[Tarief];
loadTarief();
return Tarief;
};
})();
document.getElementById('Tarieven').appendChild(doc);
}
}
var start_hour=0;
var end_hour = 10;
var hour = 0;
function loadHours() {
document.getElementById('hours').innerHTML = '';
for (var i = start_hour; i <= end_hour; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedHour = i;
return function () {
hour = selectedHour;
document.getElementById('curHour').innerHTML = hour;
loadHours();
return hour;
};
})();
document.getElementById('hours').appendChild(doc);
}
}
function loadCalendarYears() {
document.getElementById('years').innerHTML = '';
for (var i = startYear; i <= endYear; i++) {
var doc = document.createElement('div');
doc.innerHTML = i;
doc.classList.add('dropdown-item');
doc.onclick = (function () {
var selectedYear = i;
return function () {
year = selectedYear;
document.getElementById('curYear').innerHTML = year;
loadCalendarDays();
return year;
};
})();
document.getElementById('years').appendChild(doc);
}
}
function loadCalendarDays() {
document.getElementById('calendarDays').innerHTML = '';
var tmpDate = new Date(year, month, 0);
var num = daysInMonth(month, year);
var dayofweek = tmpDate.getDay()-1; // find where to start calendar day of week
for (var i = 0; i <= dayofweek; i++) {
var d = document.createElement('div');
d.classList.add('day');
d.classList.add('blank');
document.getElementById('calendarDays').appendChild(d);
}
for (var i = 0; i < num; i++) {
var tmp = i + 1;
var d = document.createElement('div');
d.id = 'calendarday_' + tmp;
d.className = 'day';
d.innerHTML = tmp;
d.dataset.day = tmp;
d.addEventListener('click', function () {
this.classList.toggle('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
else selectedDays.splice(selectedDays.indexOf(this.dataset.day), 1);
});
d.addEventListener('mousemove', function (e) {
e.preventDefault();
if (mousedown) {
this.classList.add('selected');
if (!selectedDays.includes(this.dataset.day))
selectedDays.push(this.dataset.day);
}
});
d.addEventListener('mousedown', function (e) {
e.preventDefault();
mousedown = true;
});
d.addEventListener('mouseup', function (e) {
e.preventDefault();
mousedown = false;
});
document.getElementById('calendarDays').appendChild(d);
}
var clear = document.createElement('div');
clear.className = 'clear';
document.getElementById('calendarDays').appendChild(clear);
}
function daysInMonth(month, year) {
var d = new Date(year, month + 1, 0);
return d.getDate();
}
window.addEventListener('load', function () {
var date = new Date();
month = date.getMonth();
year = date.getFullYear();
document.getElementById('curKlant').innerHTML = Klanten[klant];
document.getElementById('curTarief').innerHTML = Tarief;
document.getElementById('curHour').innerHTML = hour;
document.getElementById('curProject').innerHTML = project;
loadProjects();
loadKlanten();
loadTarief();
loadCalendarDays();
loadHours();
});
body,
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.calendar {
background-color: white;
padding: 20px;
}
.calendar .dropdown {
display: none;
position: absolute;
background-color: #fff;
color: #0047bA;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 30px;
padding-right: 30px;
width: 160px;
left: 0px;
z-index: 2000;
}
.calendar .dropdown .dropdown-item {
cursor: pointer;
opacity: 0.7;
transition: 0.5s opacity;
}
.calendar .dropdown .dropdown-item:hover {
opacity: 1;
}
.calendar .hours{
display: none;
}
.calendar .tarief {
display: none;
}
.calendar .title {
text-align: center;
font-size: 20pt;
}
.calendar .calendar-btn {
float: left;
background-color: #0047bA;
color: white;
text-align: center;
font-size: 14pt;
padding-top: 5px;
padding-bottom: 5px;
position: relative;
width: 20%;
cursor: pointer;
transition: 0.5s background-color;
}
.calendar .month-btn {
width: 40%;
height: 55px;
}
.calendar .project-btn {
height: 55px;
}
.calendar .calendar-btn:hover {
background-color: #1f71a1;
}
.calendar .hours-btn{
float: middle;
height: 55px;
}
.calendar .tarief-btn {
float: left;
height: 55px;
}
.calendar .calendar-dates .days .day {
float: left;
width: 12%;
margin: 1%;
padding: 1%;
font-size: 13pt;
text-align: center;
border-radius: 10px;
border: solid 1px #ddd;
}
.calendar .calendar-dates .days .day.blank {
background-color: white;
border: none;
}
.calendar .calendar-dates .days .day.selected {
background-color: #0047bA;
color: white;
cursor: pointer;
opacity: 0.9;
transition: 0.1s opacity;
}
.calendar .calendar-dates .days .day.selected:hover {
opacity: 1;
}
.calendar .calendar-dates .days .day.label {
height: 40px;
background-color: white;
color: black;
border: none;
font-weight: bold;
}
.clear {
clear: both;
}
#media only screen and (max-width: 960px) {
.calendar {
width: 100%;
margin: 0px;
margin: 0px;
box-sizing: border-box;
position: relative;
left: 0px;
}
}
<!DOCTYPE html>
<div>
<html>
<div>
<head>
<!-- CSS property to place div
side by side -->
<style>
#middlebox {
float: left;
width: 65%;
height: 400px;
}
#rightbox {
float: right;
background-color: white;
width: 35%;
height: 450px;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<div>
<div id="middlebox">
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<link href="/static/calendar3.css" rel="stylesheet">
</head>
<body>
<div class="calendar" id="calendar">
<div class="calendar-btn month-btn" onclick="$('#Klanten').toggle('fast')">
<span id="curKlant"></span>
<div id="Klanten" class="months dropdown"></div>
</div>
<div class="calendar-btn project-btn" onclick="$('#Projects').toggle('fast')">
<span id="curProject"></span>
<div id="Projects" class="projects dropdown"></div>
</div>
<div class="calendar-btn hours-btn" onclick="$('#hours').toggle('fast')">
<span id="curHour"></span>
<div id="hours" class="hours dropdown"></div>
</div>
<div class="calendar-btn tarief-btn" onclick="$('#Tarieven').toggle('fast')">
<span id="curTarief"></span>
<div id="Tarieven" class="Tarieven dropdown"></div>
</div>
<div class="clear"></div>
<div class="calendar-dates">
<div class="days">
<div class="day label">MON</div>
<div class="day label">TUE</div>
<div class="day label">WED</div>
<div class="day label">THUR</div>
<div class="day label">FRI</div>
<div class="day label">SAT</div>
<div class="day label">SUN</div>
<div class="clear"></div>
</div>
<div id="calendarDays" class="days">
</div>
</div>
<html>
<head>
<style>
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<style>
.myBtn {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.myBtn1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.myBtn1:hover {
background-color: #0047bA;
color: white;
}
</style>
<button id="myBtn" class="myBtn myBtn1">Uren indienen</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Je staat op het punt om je uren in te dienen, weet je zeker dat alles klopt?</p>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.2s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #0047bA;
}
.button1:hover {
background-color: #0047bA;
color: white;
}
</style>
</head>
<body>
<a href="{{ url_for('schrijven') }}">
<button class="button button1">Ja, dien mijn uren in</button></a>
</body>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
</div>
<script type="text/javascript" src="/static/jscodes/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/jscodes/calendar3.js" async></script>
</body>
</div>
<div class="card">
<div class="rightbox_buttons" id="rightbox">
<div>
<h2>Welke uren heb ik geschreven?</h2>
</div>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'week')">Per week</button>
<button class="tablinks" onclick="openCity(event, 'maand')">Per maand</button>
<button class="tablinks" onclick="openCity(event, 'klant')">Per klant</button>
</div>
<div id="week" class="tabcontent">
<p>Je hebt deze week geschreven: </p>
</div>
<div id="maand" class="tabcontent">
<p>Je hebt deze maand geschreven:</p>
</div>
<div id="klant" class="tabcontent">
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("select.klant").change(function(){
var selectedCountry = $(this).children("option:selected").val();
alert("You have selected the country - " + selectedCountry);
});
});
</script>
</head>
<body>
<form>
<label>kies klant:</label>
<select class="klant">
{% for klant in klant %}
<option value="{{ klant }}" SELECTED>{{ klant }}</option>
{% endfor %}
</select>
<input type="text" size="30" name="display" id="display" />
</form>
</body>
</html>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{%endblock%}
Preferably, I want to save the selected customer in a new variable (so I can return it in my HTML) and use it later on. How would I be able to do this?

You to put the below code to save the selected value inside a variable inside the onclick event.
var selected_Value= $('.dropdownid :selected').val();

How to position a h1 directly over an input and have it be for all screens?

So I want to replace the text inside of an input field with a h1 tag as soon as the user hits submit because i want the text to have an animation but i can't animate the text inside the text field.
I linked the code pen project version of it to make it easier then organizing all the code in here. I added all the code I had so I wouldn't leave anything out although some of it may be irrelevant.
Basically I want the h1 tag to appear exactly where the input text was so it looks like nothing ever got replaced.
https://codepen.io/timvancowabunga/pen/rNOqdYd
$(document).ready(function() {
$('#btn1').click(function() {
$('#test').text($("#message").val());
$('#message').val('');
$('#test').val('');
});
});
function onTextClick() {
document.getElementById('btn1').className = "show";
}
function showButton() {
document.getElementById('btn1').style.display = 'block';
}
function showSendButton() {
document.getElementById('btn2').style.display = 'block';
}
function formCheck() {
var input = $('#message').val();
if (input == '') {
alert("Please Submit a Valid Message");
} else {
hideButton();
showSendButton();
}
}
function hideButton() {
document.getElementById('btn1').style.display = 'none';
}
function hideSendButton() {
document.getElementById('btn2').style.display = 'none';
document.getElementById('sent').style.display = 'block';
}
function myMove() {
var textWrapper = document.querySelector('.ml13');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline()
.add({
targets: '.ml13 .letter',
translateY: [0, -1600],
opacity: [1, 0],
easing: "easeInSine",
duration: 3600,
delay: (el, i) => 800 + 60 * i
});
}
body {
background-color: #368670;
font-family: sans-serif;
}
.ml13,
.ml14,
.ml15 {
font-size: 1.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.ml15 {
letter-spacing: 0em;
text-align: center;
}
.ml13 .letter {
display: inline-block;
line-height: 1em;
}
.line {
display: flex;
margin: auto;
width: 50%;
margin-top: 500px;
}
.wrappy {
position: relative;
}
.wrappy h1 {
position: absolute;
left: 48.5%;
top: 20%
}
.butt {
padding-top: 50px;
display: flex;
margin: 0 auto;
width: 100%;
}
#btn1,
#btn2 {
display: table;
margin: 0 auto;
}
input {
z-index: 1000;
margin-left: 10%;
width: 80%;
background: transparent;
border: 0;
border-bottom: 1px solid;
padding: 1em 0 .1em;
text-align: center;
font-size: 18px;
font-family: inherit;
font-weight: 300;
line-height: 1.5;
color: inherit;
outline: none;
}
input:focus {
border-color: #ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="truth">
<!-- <div class="line"> -->
<div class="message-box">
<form class="message-form">
<h2 class="ml15" for="message">TELL A TRUTH</h2>
<div class="wrappy">
<input type="text" id="message" name="message" autocomplete="off" class="ml14">
<!-- <h1 id="test" class="ml13">I love your music!</h1> -->
<h1 id="test" class="ml13"></h1>
</div>
</form>
</div>
<div class="butt">
<button id="btn1" onclick="formCheck();">Ready to Send?</button>
<button id="btn2" style="display: none" onclick="myMove(); setTimeout(showButton, 3000); hideSendButton();">Send!</button>
</div>
</div>

You want to put H1 below the input.
Then you make the text input transparent. Bind the input value to h1.
So in effect when user clicks and type, they are selecting the input and changing its value, but it's transparent, to be shown by the h1 below the input that you will eventually animate.
Also because you mentioned you want it to display correctly in all platforms. You then have to be cognisant of the default behaviours of DOM and CSS properties. If you alter them to get what you want without knowing its natural order, you can get unexpected behaviour and reduce cross-browser compatibility. I have made changes to reflect that.
$(document).ready(function () {
$("#btn1").click(function () {
$("#test").text($("#message").val());
$("#message").val("");
$("#test").val("");
});
});
function onTextClick() {
document.getElementById("btn1").className = "show";
}
function showButton() {
document.getElementById("btn1").style.display = "block";
}
function showSendButton() {
document.getElementById("btn2").style.display = "block";
}
function formCheck() {
var input = $("#message").val();
if (input == "") {
alert("Please Submit a Valid Message");
} else {
hideButton();
showSendButton();
}
}
function hideButton() {
document.getElementById("btn1").style.display = "none";
}
function hideSendButton() {
document.getElementById("btn2").style.display = "none";
document.getElementById("sent").style.display = "block";
}
// attach this to bind h1 to the input value at all times.
$("#message").keyup(function () {
var self = this;
$("#test").text($(this).val());
});
function myMove() {
var textWrapper = document.querySelector(".ml13");
textWrapper.innerHTML = textWrapper.textContent.replace(
/\S/g,
"<span class='letter'>$&</span>"
);
anime.timeline().add({
targets: ".ml13 .letter",
translateY: [0, -1600],
opacity: [1, 0],
easing: "easeInSine",
duration: 3600,
delay: (el, i) => 800 + 60 * i
});
}
body {
background-color: #368670;
font-family: sans-serif;
}
.ml13,
.ml14,
.ml15 {
font-size: 1.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.ml15 {
letter-spacing: 0em;
text-align: center;
}
.ml13 .letter {
display: inline-block;
line-height: 1em;
}
.line {
display: flex;
margin: auto;
width: 50%;
margin-top: 500px;
}
.wrappy {
position: relative;
text-align: center;
}
.wrappy h1 {
position: absolute; /* you then want to give wrappy h1 this to make it occupy no space. */
width: 100%; /* to centralize the text, your option here is to make this 100% width and use text-align */
text-align: center;
padding-top: 21px;
}
.butt {
padding-top: 50px;
display: flex;
margin: 0 auto;
width: 100%;
}
#btn1,
#btn2 {
display: table;
margin: 0 auto;
}
input {
position: relative; /* in order for z-index to work, you need to give an element `position` attribute of value `static`, `relative` or `absolute`. */
z-index: 1000; /* now this will work. wrappy h1 is not given a `z-index` so it defaults to `1`, hence input will be on top of wrappy h1 now. */
width: 80%;
background: transparent;
border: 0;
border-bottom: 1px solid #000; /* you need the line back because we are going to assign color to be transparent */
padding: 35px 0 0 0;
text-align: center;
font-size: 18px;
font-family: inherit;
font-weight: 300;
line-height: 1.5;
color: transparent; /* make the text transparent */
outline: none;
}
input:focus {
border-color: #ffffff;
}
<div class="truth">
<!-- <div class="line"> -->
<div class="message-box">
<form class="message-form">
<h2 class="ml15" for="message">TELL A TRUTH</h2>
<div class="wrappy">
<!-- for natural flow, you want to shift #test to above the input, so that input can stack on top of it -->
<h1 id="test" class="ml13"></h1>
<input type="text" id="message" name="message" autocomplete="off" class="ml14">
<!-- <h1 id="test" class="ml13">I love your music!</h1> -->
</div>
</form>
</div>
<div class="butt">
<button id="btn1" onclick="formCheck();">Ready to Send?</button>
<button id="btn2" style="display: none" onclick="myMove(); setTimeout(showButton, 3000); hideSendButton();">Send!</button>
</div>
</div>

Buttons are not showing up after being hidden in Javascript

I have a bunch of buttons, some shown some hidden. When the shown buttons are clicked, they should get hidden and a select few of the hidden buttons should get shown. Unfortunately, only the shown buttons are becoming hidden. The hidden buttons don't appear.
I have tried different display types for the buttons, but I actually no nothing of html, CSS, or Javascript to know what I am doing or if what I am doing changes anything.
html:
hideGenres();
function proudCondfidentResults() {
hideFeelings();
showIndustrialGothicButton();
showMetalButton();
}
function powerfulPumpedResults() {
hideFeelings();
}
function showIndustrialGothicButton() {
document.getElementById("industrialGothic").style.display = "block";
}
function showMetalButton() {
document.getElementById("metal").style.display = "block";
}
function hideFeelings() {
document.getElementById("feelingButtons").style.display = "none";
}
function hideGenres() {
document.getElementById("genreButtons").style.display = "none";
}
button {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
background-color: #279;
color: #fff;
border: 0;
border-radius: 3px;
cursor: pointer;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
height: 20%;
width: 49%;
float: left;
}
button:hover {
background-color: #38a;
}
<div id="feelingButtons">
<button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
<button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>
<div id="genreButtons">
<button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
<button id="metal" onclick="metalLink()">Metal</button>
</div>
When the Proud/Confident button is clicked I expect to have the Proud/Confident and Powerful/Pumped buttons disappear and for the Industrial/Gothic and Metal buttons to appear. What happens currently is the Proud/Confident and Powerful/Pumped buttons disappears, but the Industrial/Gothic and Metal buttons stay hidden. How do you make it so that the Industrial/Gothic and Metal buttons are shown?

You need to change the display style of genreButtons div
hideGenres();
function proudCondfidentResults() {
hideFeelings();
industrialGothicLink();
showMetalButton();
}
function powerfulPumpedResults() {
hideFeelings();
}
function industrialGothicLink() {
document.getElementById("industrialGothic").style.display = "block";
}
function showMetalButton() {
document.getElementById("metal").style.display = "block";
}
function hideFeelings() {
document.getElementById("feelingButtons").style.display = "none";
//changed here
document.getElementById("genreButtons").style.display = "block";
}
function hideGenres() {
document.getElementById("genreButtons").style.display = "none";
}
button {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
background-color: #279;
color: #fff;
border: 0;
border-radius: 3px;
cursor: pointer;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
height: 20%;
width: 49%;
float: left;
}
button:hover {
background-color: #38a;
}
<div id="feelingButtons">
<button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
<button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>
<div id="genreButtons">
<button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
<button id="metal" onclick="metalLink()">Metal</button>

Try hiding the Genre Buttons div by default via CSS (display:none). Once Proud/Confident are clicked, the genreButtons div will show as desired. This way, all the elements within the genre's div will toggle together.
<html><body>
<style>
button {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
background-color: #279;
color: #fff;
border: 0;
border-radius: 3px;
cursor: pointer;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
height: 20%;
width: 49%;
float: left;
}
button:hover {
background-color: #38a;
}
#genreButtons {
display: none;
}
</style>
<script>
hideGenres();
function proudCondfidentResults() {
hideFeelings();
showIndustrialGothicButton();
showMetalButton();
}
function powerfulPumpedResults() {
hideFeelings();
}
function showIndustrialGothicButton() {
document.getElementById("industrialGothic").style.display = "block";
}
function showMetalButton() {
document.getElementById("genreButtons").style.display = "block";
}
function hideFeelings() {
document.getElementById("feelingButtons").style.display = "none";
}
function hideGenres() {
document.getElementById("genreButtons").style.display = "none";
}
</script>
<div id="feelingButtons">
<button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
<button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>
<div id="genreButtons">
<button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
<button id="metal" onclick="metalLink()">Metal</button>
</div></body></html>