Develop Reference

Javascript: The code works fine on computer but has problem when being applied on Blogger

I'm designing a "note" section for my blogger posts.
The code is supposed to create 3 child divisions inside the "note-container" which, in order, have the class "takeaway", "vertical-bar" and "note-content" and move the text inside the "note-container" into the "note-content".
My code works fine when being run on with the HTML file on my computer, but when being applied on Blogger, no child divisions were appended. This is my code for the child-appending function:
function create_note() {
let note_container = document.querySelectorAll(".note-container");
console.log(note_container);
for (let i = 0; i < note_container.length; ++i){
let note_content = document.createElement("div");
note_content.classList.add("note-content");
note_content.innerText = note_container[i].innerText;
note_container[i].innerText = "";
console.log(note_content.innerText);
let takeaway = document.createElement("div");
takeaway.innerText = "NOTE";
takeaway.classList.add("takeaway");
let vertical_bar = document.createElement("div");
vertical_bar.classList.add("vertical-bar");
note_container[i].appendChild(takeaway);
note_container[i].appendChild(vertical_bar);
note_container[i].appendChild(note_content);
}
}
create_note();
You can activate the code on blogger by putting some text inside a division (in the HTML tab in the post) like this:
<div class = "note-container"> Lorem Ipsum </div>
This is what it is supposed to look like:
When I add console.log(note_container) to the code and applied it to blogger, it didn't return anything, as well.
What I could have done wrong?
If you need the full code this is the link: https://github.com/Haiyahhh/Note

Can't add omouseover attribute dynamically from javascript

I'm trying to add the attributes dynamically to an img tag but only onmouseenter is not been included else everything is been added perfectly
let img_elem = document.createElement('img')
img_elem.src = movies[i].large_cover_image
img_elem.alt = 'poster'
img_elem.id = i
img_elem.className ='poster'
img_elem.onmouseover = 'give_me_id(this)'
This is my HTML after adding attributes dynamically
<img src="https://yts.mx/assets/images/movies/woodstock_99_peace_love_and_rage_2021/large-cover.jpg" alt="poster" id="0" class="poster">
Just an issue with onmouseover else everything working perfectly.
I have already found other ways to add onmouseover attribute but the above method seems to be easier than I have used, so let me know the issue here. Thank you in advance

It's not working because we are trying to add the attribute but what we really want is add event listener. Below is the code please try it out
let img_elem = document.createElement('img');
img_elem.src = 'https://upload.wikimedia.org/wikipedia/commons/1/12/User_icon_2.svg'
img_elem.alt = 'poster';
img_elem.id = 'img1'; //i;
img_elem.className ='poster';
img_elem.addEventListener("mouseover",function(event){console.log('mouseover');});
document.getElementById('imgParent').appendChild(img_elem);
<div id='imgParent'>
</div>

I'm guessing that you're following the W3Schools example, but the example is adding a method through the attribute. You can't really do that in javascript code. Instead, you send in a function and then use event.target to get which image that the user is hovering. I'm taking one more step, and using shorthand properties (I think that's the name) to get target directly by using {target}.
Another way is to add an eventlistener instead, like in Bharat's answer.
const imageIds = [100, 200, 400];
for (const id of imageIds) {
let img_elem = document.createElement('img');
img_elem.src = `https://picsum.photos/id/${id}/200/200`;
img_elem.alt = 'poster';
img_elem.id = id;
img_elem.className = 'poster';
img_elem.onmouseover = giveMeId;
document.body.appendChild(img_elem);
}
function giveMeId({target}) {
console.log('id:', target.id);
}

Javascript that changes HTML code

Is it possible to make javascript to when you enter variables to add code to html..? I don't know English too good, so..I'm going to draw it!
Also, I don't want it to change everything, but I want it just to add that
info to the list..I have premade HTML page with linked CSS.
If you have any questions, please ask me, just help me.. :(
I know HTML and CSS, java..Not even a little bit.. :/
If you are here reading this, THANK YOU! <3

You have many options to add html to your page through JavaScript.
1) Simply create a div with an id
<div id="enterTextHere"></div>
2) Inside of your custom.js file or inside of <script></script>, you can use many different methods
Method 1 : Using innerHTML
var desiredElement = document.getElementById("enterTextHere");
desiredElement.innerHTML = "<p>I added text!</p>";
Method 2 : Using JQuery.append
$("#enterTextHere").append("I added text!");
I'm sure there are many more but without your specific code to reference this is the best I can do. Please use this link for your reference. It also has a lot of good information for the rest of your HTML journey. Enjoy! w3schools

Maybe something like this can help:
HTML:
<table class="table"><tr id="update-table"></tr></table>
<script>
(function(){
var updater = (function(){
function updater( options ){
this.table = options.table;
this.cells = this.table.querySelectorAll('.cell');
this.num_cells = this.cells ? this.cells.length : 0;
}
updater.prototype.update_element = function( index, value ){
this.cells[index].innerHTML = value;
};
updater.prototype.add_element = function(){
var td = document.createElement('td');
td.setAttribute('class','cell');
this.table.appendChild(td);
this.cells.push(td);
this.num_cells++;
};
return updater;
})();
window.updater = updater;
})();
var table, a, count = 0;
table = document.getElementById('update-table');
a = new updater({table:table});
for(var i = 0; i < 5; ++i){
a.add_element();
a.update_element(i,'info'+i);
}
</script>

Createing and calling events in Javascript

I'm working on a choose your own adventure game written entirely in HTML and Javascript; I want to create most of my elements entirely in Javascript to create an awesome dynamic game! I am having trouble using events and event listeners. It's a mystery game; after the player chooses their character from a list, they can invite five guests to a party. One of the guests is killed, leaving you to solve the mystery with three suspects.
After you've selected your player, there's another button that says "Select this character!". When this button is clicked, the player creation UI is supposed to be hidden, and a new UI is visible. With the code as it is now, the "StartGame" function is skipped entirely. What am I doing wrong? Any help you can give would be seriously awesome and greatly appreciated!
btnPlayer = document.createElement('button');
btnPlayer.id = 'BTN_btnPlayer';
btnPlayer.type = 'button';
btnPlayer.addEventListener('click', welcomePlayer(), true);
btnPlayer.onclick = welcomePlayer();
btnPlayer.innerHTML = 'Select This Character!';
myDiv.appendChild(btnPlayer);
EDIT
I modified my button event properties to look like this:
btnPlayer.addEventListener('click', welcomePlayer, true);
//btnPlayer.onclick = welcomePlayer;
One is commented out because neither has worked. I tried clearing my cache, too. Here is my StartGame() function with the button code excluded. I won't include the "charFirstNames[]" and "charLastNames[]" used to create the choices in my dropdownlist. I have them separated in order to tell a more interesting story; they will eventually be database records when I get the bugs and the basics worked out. I don't think I messed up anything up here, but is it possible that I did? The function is called by the only button coded into the HTML.
function startGame(divName) {
myDiv = document.getElementById('story');
lblPlayer = document.createElement('label');
lblPlayer.id = 'LBL_Player';
lblPlayer.htmlFor = 'DDL_PlayerChar';
lblPlayer.innerHTML = 'Please select a character. ';
myDiv.appendChild(lblPlayer);
ddlPlayer = document.createElement('select');
ddlPlayer.id = 'DDL_PlayerChar';
myDiv.appendChild(ddlPlayer);
defOpt = document.createElement("option");
defOpt.value = 0;
defOpt.text = 'Select...';
ddlPlayer.appendChild(defOpt);
//Create and append the options
for (var i = 0; i < charFirstNames.length; i++) {
var option = document.createElement("option");
option.value = charFirstNames[i]+'_'+charLastNames[i];
option.text = charFirstNames[i]+' '+charLastNames[i];
ddlPlayer.appendChild(option);
}
document.getElementById('BTN_Start').hidden = true;
}
The welcomePlayer() function is similar to the startgame() function, creating the interface to invite the first "guest" and removing the player creation UI.

Both of these lines set the onclick handler to the result of calling the welcomePlayer function (see the parens?).
btnPlayer.addEventListener('click', welcomePlayer(), true);
btnPlayer.onclick = welcomePlayer();
You probably mean
btnPlayer.addEventListener('click', welcomePlayer, true);

Create figure using function javaScript function createElement(tagName)

I need to create a new figure at runtime on my web app. I am using javascript and html/css.
The element that i got to create is the follow:
<figure id = "myImage" class="ball" >
<span class="shadow">
</span>
</figure>
I have tried some tag names and the "ball" isn't created.
The following code is an example(not working) what is the problem?
var generatedBall = document.createElement("FIGURE");
generatedBall.class = 'ball';
generatedBall.style.background = 'yellow';
document.body.appendChild(generatedBall);
Thanks for help.

It's working for me, see my fiddle.
You just have to give it height;
var generatedBall = document.createElement("figure");
generatedBall.classList.add('ball'); //Edited this
generatedBall.style.background = 'yellow';
generatedBall.style.height = '100px'; //Added bit
document.body.appendChild(generatedBall);

See the exact output on this page See Here
var innerSpan = document.createElement('span');
innerSpan.classList.add('shadow');
var generatedBall = document.createElement('figure');
generatedBall.setAttribute("id","myImage")
generatedBall.classList.add('ball');
document.body.appendChild(generatedBall);
generatedBall.appendChild(innerSpan);

The Element does not have a class property. Instead, you can add and remove classes using classList. So your example would become:
var generatedBall = document.createElement('figure');
generatedBall.classList.add('ball');
generatedBall.style.background = 'yellow';
document.body.appendChild(generatedBall);