Develop Reference

I'm struggling to create a button in javascript

var buttonDivEl = document.getElementById('buttonDiv');
var startFunctionEl = document.getElementById('startFunction');
startFunctionEl.onclick = myFunction;
function myFunction() {
startFunctionEl.remove();
var createButton = document.createElement("button");
createButton.innerHTML = "my new button";
document.buttonDivEl.appendChild(createButton);
}
<div id="buttonDiv"></div>
<button id="startFunction">Click</button>
My HTML is just a button (id of startFunction) inside of a div (id of buttonDiv)
I'm trying to make it so when I click the startFunction button, it will remove it and add a new button inside of buttonDiv, but it doesn't seem to be working properly. if I replace the following code:
document.buttonDivEl.appendChild(createButton);
with
document.body.appendChild(createButton);
it works, but I want it to append to the buttonDiv specifically, not the body.

Change your code from:
document.buttonDivEl.appendChild(createButton);
To:
buttonDivEl.appendChild(createButton);

why is this button useless after 1 click?

I want to add a div (with class="book-card") each time I click the button (with class="add-book-btn". With the code below, when i click the button for first time, it works. But then the something is wrong and the button seems it's not working.
HTML:
<fieldset class="self">
<legend class="self-title">curently reading</legend>
<button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
</fieldset>
JS:
const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");
addBookBtn[0].addEventListener("click", function() {
selfs[0].innerHTML += `<div class="book-card"></div>`;
console.log(selfs[0]);
});

Using the code of #Dylan Cadd and focusing on my elemnts it worked. But I can't understand what's the differece
JS:
const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName("add-book-btn");
addBookBtn[0].addEventListener("click", function() {
let innerDiv = document.createElement('div');
innerDiv.className = 'book-card';
selfs[0].appendChild(innerDiv);
});

Try this code:
const selfs = document.getElementsByClassName("self");
function add_card() {
const addBookBtn = document.getElementsByClassName('add-book-btn');
addBookBtn[0].addEventListener('click', function(){
selfs[0].innerHTML += `<div class="book-card"></div>`;
console.log(selfs[0] );
add_card();
});
};
add_card();
<fieldset class="self">
<legend class="self-title">curently reading</legend>
<button class="add-book-btn">Click</button>
</fieldset>

I found a solution that is working for me. Instead of editing the innerHTML, I am dynamically creating the div with the classname and appending it to the main fieldset.
const selfs = document.querySelector(".self");
const addBookBtn = document.querySelector(".add-book-btn");
addBookBtn.addEventListener("click", function() {
let innerDiv = document.createElement('div');
innerDiv.className = 'book-card';
selfs.appendChild(innerDiv);
console.log(selfs);
});
This solution works for me, let me know if it doesn't for you

include one mouseover into a div created with javascript

i have one script :
if (el.tags.includes(selectedTag)) {
const itemsContent = document.createElement('div');
itemsContent.className = 'items-content';
const h2 = document.createElement('h2');
h2.className = 'project-title';
h2.innerHTML = el.title;
div.appendChild(h2);
main.appendChild(div);
}
And i want to be able to add a mouseover in my 'itemsContent' div
to generate something like :
<div onmouseover="onProjectHover(...)" class="items-content"> My content</div>
Thanks ;)

Use
itemsContent.addEventListener("mouseenter", function (event)){
// your event handler code goes here
})
Refer https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

My javascript mobile menu only opens when double clicked.

I'm making a website for my friend using just HTML/CSS3 and Vanilla JS. Everything seems to be going OK but I can't figure out why my mobile menu only opens when I click it twice. It only does this the first time I try clicking it after refreshing the page. Once it's open I can open and close it again with one click.
Here is the relevant HTML
<header id = "top-menu">
<img id = "title-image" class = "desktop-site" src = "images/ben-the-mover-guy.png">
<img id = "mobile-title-image" class = "mobile-site" src = "images/mobile-title-white.png">
<h1 id = "title-text">Ben the Mover Guy</h1>
<a id = "mobile-icon" href = "javascript:void(0);" onClick = "dropDown()"><i id = "mobile-icon-id" class = "ion-navicon-round"></i></a>
<nav id = "icon-nav" class = "desktop-site">
<i class = "ion-social-facebook"></i>
<i class = "ion-android-mail"></i>
<i class = "ion-ios-calculator"></i>
</nav>
<nav id = "main-nav" class = "horizontal-nav desktop-site">
<span class = "selected">ABOUT</span>
RATES
<span class = "link-break-line">PREPARING FOR</span> YOUR MOVE
CONTACT
</nav>
</header>
and Javascript
function dropDown() {
var x = document.getElementById("main-nav");
var y = document.getElementById("mobile-icon-id");
if (x.className === "horizontal-nav") {
x.className = "mobile-nav";
y.className = "ion-close-round"
} else {
x.className = "horizontal-nav";
y.className = "ion-navicon-round"
}
}
The issue is definitely not the CSS. After hitting up Inspect Element I noticed that it's not changing the class name to "mobile-nav" until the second click, so it's an issue with the JS.
I did a mock website a while ago where I used similar code and I didn't have this problem. The only difference was that I used a div with a unordered list for the nav links instead of the '' tag. That wouldn't have anything to do with it would it?

The reason this is occurring is because you're checking the className attribute, which contains all classes of the element. The first time it's being checked, the value is not horizontal-nav -- it's horizontal-nav desktop-site, which causes the code in the else block to fire. The second time around, it is horizontal-nav, so it works correctly.
Use x.classList.contains("horizontal-nav"), or build/use a method to check whether className contains horizontal-nav rather than is horizontal-nav. jQuery's hasClass works perfectly for this, if you need to support older browsers.

change your js function to this and it will work..
function dropDown() {
var x = document.getElementById("main-nav");
var y = document.getElementById("mobile-icon-id");
if (x.classList.contains("horizontal-nav")) {
x.className = "mobile-nav";
y.className = "ion-close-round"
} else {
x.className = "horizontal-nav";
y.className = "ion-navicon-round"
}
}

How To Create And Assign And Onclick Element To Another Element Created In JS

So, I am trying to make an element and then assign an onclick to it through JS.
Here is my code so far:
HTML
<div id = "Programs" onclick = "Cpb()">Programs</div>
JS
function Cpb() {
document.getElementById("AllBody").innerHTML = "";
var rh = document.createElement("h2");
var rht = document.createTextNode("Recent Programs");
rh.id = "Recentt";
var rh1 = document.createElement("h4");
var rh1t = document.createTextNode("test");
rh1t.onclick = window.open('website');
rh1.appendChild(rh1t);
rh.appendChild(rht);
}
So does anybody know how I can do this?

This javascript worked for me:
let h4Node = document.createElement("H4");
h4Node.innerHTML = "4th Header";
h4Node.onclick = function (){
alert('Oi!');
};
document.getElementById("demo").appendChild(h4Node);
Html:
<div class="demo"></div>
It will put an h4 element with an onclick event listener inside the demo div.

I think you want addEventListener.
Example:
rh1t.addEventListener('click', myHandlerFunction);
function myHandlerFunction () {
// ...
}
You can continue using onclick as you have in your code. But you'll need to do as I've done above and assign a function reference to it. Like this:
rh1t.onclick = myHandlerFunction;
function myHandlerFunction () {
window.open('website');
}