How can i edit the style of elements created in innerHTML? - javascript

I wanted to change the style of the second div-element from the innerHTML when i click on the img, but this doesnt work.
function display(restaurantArr, name){
title.innerHTML = `<h2>Available restaurants in ${name}:`
for(let items of restaurantArr){
console.log(items)
main.innerHTML += `
<div class="container">
<p class="containerP">${items.restaurant.name}</p>
<img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
</div>
<div id="someid" class="container2">
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
`
}
}
The function where i tried to edit the second div. Although i understand why this doesnt work, it is a visualisation of what i tried to do:
function editDiv2(){
const div2 = document.querySelector('.div2')
div2.style.color = "red";
}


It works for me:
display([{
restaurant: {
name: 'Restaurant Name'
}
}], 'London')
function display(restaurantArr, name) {
title.innerHTML = `<h2>Available restaurants in ${name}:`
for (let items of restaurantArr) {
console.log(items)
main.innerHTML += `
<div class="container">
<p class="containerP">${items.restaurant.name}</p>
<img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
</div>
<div id="someid" class="container2">
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
`
}
}
function editDiv2() {
const div2 = document.querySelector('#someid')
div2.style.color = "red";
}
<h2 id="title"></h2>
<div id="main"></div>


<img onclick="div2()"
should be
<img onclick="editDiv2()"
Or the editDiv2 function will not get called.


(function() {
display()
clickEvent()
})();
function display(){
main = document.getElementById("div1")
main.innerHTML = '<div class="container"><p class="containerP">${items.restaurant.name}</p><img id="imageid" class="imgAdd" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png"></div><div id="someid" class="container2"><p>Test</p><p>Test</p><p>Test</p></div>'
}
function clickEvent(){
var image = document.getElementById("imageid")
image.addEventListener("click", function(){
const div2 = document.querySelector('.container2')
div2.style.color = "red";
})
}
Where ever you call your display function add a new function for your task and call it below display so it can register dom element its click event listner.
Here is the updated fiddle.
https://jsfiddle.net/3h61jdfv/


As this is created dynamically you need to add event dynamically to
add an ID to the Image
<img id="image" class="imgAdd" src="pngwave.png">
then write a click function
const image = document.getElementById("image")
image.addEventListener("click", function(){
const div2 = document.querySelector('.div2')
div2.style.color = "red";
})

Related

How to change the id of an element in html using javascript?

It is my first time using JavaScript. I am trying to make a button where every time visitors click, it'll show another extra line of text. I often get an error on my JavaScript, and I'm not sure how to fix it. Thank you so much!
HTML;
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="text">
<div class="one hide">
One
</div>
<div class="two hide">
Two
</div>
<div class="three hide">
Three
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
JS;
const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = document.getELementById('hr2');
var hr3 = document.getElementById('hr3');
hr1.addEventListener('click', () => {
one.classList.remove('hide');
hr1.id = "hr2";
})
// I often get an error on hr2.addEventListener
hr2.addEventListener('click', () => {
two.classList.remove('hide');
hr2.id = "hr3";
})

Your code throws error because you are trying to set hr2 and hr3 when they are not exist.
You need to set hr2 and hr3 variables after setting id's of them like below:
hr1.id = "hr2";
hr2= document.getElementById('hr2');
const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = null;
var hr3 = null;
hr1.addEventListener('click', () => {
//one.classList.remove('hide');
hr1.id = "hr2";
hr2= document.getElementById('hr2');
console.log(hr2);
hr2.addEventListener('click', () => {
two.classList.remove('hide');
hr2.id = "hr3";
hr3 = document.getElementById('hr3');
console.log(hr3);
})
})
// I often get an error on hr2.addEventListener
<div class="container">
<div class="text">
<div class="one hide">
One
</div>
<div class="two hide">
Two
</div>
<div class="three hide">
Three
</div>
</div>
clickme
</div>

Appended image to div not getting displayed

I am trying to print img by creating a new div and then appending it with image but image is not getting displayed.
HTML
<body>
<div id="col" class="container-fluid">
<h2>Rock Paper Scissor</h2>
<div class="row">
<div id="col-1" class="col-lg-4">
<img id="rock"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTNKl4bKaZufRk7DkQGewkv4cNYlQ0qpkdyA&usqp=CAU"
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="paper"
src="data:image/jpeg;base64,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"
alt="" onclick="rpsGame(this)">
</div>
<div class="col-lg-4">
<img id="scissor" onclick="rpsGame(this)"
src="data:image/jpeg;base64,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"
alt="">
</div>
</div>
</div>
<script src="index.js" async defer></script>
</body>
JS
Here rpsGame is the main function and function rpsFrontEnd is called and the parameters for rpsFrontEnd are correct.
function rpsGame(yourChoice) {
var humanChoice = yourChoice.id;
var botChoice = noToChoice(randTorpsInt());
console.log("bot choice " + botChoice);
console.log("your choice " + humanChoice);
var results = decideWinner(humanChoice, botChoice);
console.log(results);
var message = finalMessage(results);
console.log(message);
rpsFrontEnd(humanChoice, botChoice, message);
}
This rpsFrontend first removes all images and then create a new div and append an img into it but img is not getting printed
function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
var imageDatabase = {
"rock": document.getElementById("rock").src,
"paper": document.getElementById("paper").src,
"scissor": document.getElementById("scissor").src
}
document.getElementById("rock").remove();
document.getElementById("paper").remove();
document.getElementById("scissor").remove();
var humanDiv = document.createElement("div");
var botDiv = document.createElement("div");
var messageDiv = document.createElement("div");
humanDiv.innerHTML="<img src'"+imageDatabase[humanImageChoice]+"'>";
console.log(humanDiv);
document.getElementById("col").appendChild(humanDiv);
}
Thanks for your time!

document.getElementById("row").appendChild(humanDiv);
This line isn't working because you don't have an element with the ID row in your HTML - it is a class so getElementById isn't finding it.
Change this
<div class="row">
to this
<div id="row">

After one hour I got answer very small error
humanDiv.innerHTML="<img src='"+imageDatabase[humanImageChoice]+"'>";
an equal to sign was missing in innerHtml again thanks to those who gave here time

insert content into div from textarea Javascript

I am building a chat and i need to append content from the textarea to an inner div upon clicking send
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
the button and textarea code is
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn" >Send</a>
Javascript
var sendButton= document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv= document.getElementById('inner');
var message=textArea.value;
sendButton.addEventListener('click', function(){
innerDiv.innerHTML=meMessage;
});
var meMessage= '<div class="outgoing" id="outgoing">'+
'<div class="me" id="me"></div></div>';
What i am trying to do is show the text value of the text area to the inner div called 'me' when i click send
and also get the value of the textarea to save it to a database. How can i achieve this

First of all you shouldn't create html elements manually since they would be XSS vulnerable and read about escaping mechanics to prevent malicious code being injected.
Try using document.createElement('div'); method to create div with valid innerText.
later use method:
innerDiv.appendChild(createdElement);
To append element.
You could create builder to build html elements you need and you have to htmlEncode text that will be inside of div element.
const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function () {
const message = new MessageContainerBuilder().BuildMessage(textArea.value);
innerDiv.appendChild(message);
textArea.value = '';
});
function encodeHtmlEntity(input) {
var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function (i) {
return '&#' + i.charCodeAt(0) + ';';
});
return output;
}
function MessageContainerBuilder() {
var createDivElement = function (classTest) {
var div = document.createElement('div');
var classAttr = document.createAttribute('class');
classAttr.value = classTest;
div.setAttributeNode(classAttr);
return div;
};
var createSpanElement = function (value, classTest) {
var span = document.createElement('span');
if (classTest) {
var classAttr = document.createAttribute('class');
classAttr.value = classTest;
span.setAttributeNode(classAttr);
}
span.innerText = encodeHtmlEntity(value);
return span;
};
this.BuildMessage = function (text) {
var divContainer = createDivElement('outgoing');
var messageSpan = createSpanElement(text, 'me');
divContainer.appendChild(messageSpan);
return divContainer;
};
}
<div id="inner">
<div class="incoming">
<div class="them">Lorem
</div>
</div>
<div class="outgoing">
<div class="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>
UPDATE: Extended snippet code. Removed Ids since they shouldn't be used there to create multiple message elements with same Id. Changed anchor to button.

You need to get the value of the textarea on click of the link
var sendButton = document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv = document.getElementById('inner');
var message = textArea.value;
sendButton.addEventListener('click', function() {
innerDiv.innerHTML = `<div class="outgoing" id="outgoing">${textArea.value}
<div class="me" id="me"></div></div>`;
});
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn">Send</a>

You can use this. Youe message variable is not receiving the textarea value
var sendButton= document.getElementById('send-btn');
var innerDiv= document.getElementById('inner');
sendButton.addEventListener('click', function(){
innerDiv.innerHTML=innerDiv.innerHTML+'<div class="outgoing" id="outgoing">'+document.getElementById('input').value+
'<div class="me" id="me"></div></div>';
});
<div class="inner" id="inner">
<div class="incoming" id="incoming">
<div class="them" id="them">Lorem
</div>
</div>
<div class="outgoing" id="outgoing">
<div class="me" id="me">Lorem ipsum
</div>
</div>
</div>
<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn" >Send</a>

Maybe be replacing your js with that :
document.getElementById('send-btn').addEventListener('click',
function(){
var userInput = document.getElementById('input').value;
if(userInput) { document.getElementById('me').innerHTML += '<br>' + userInput; }
}
);
That should let you go a step forward... And good luck for saving to DB.

innerDiv.append(message)
instead of
innerDiv.innerHTML=message

Javascript Function back to it's original place

I'm not actually a programmer but I have to do this website work properly. And for that I'll need your help.
I'm messing with some javascript and I manage to maek this:
<script>
function funcaosabores1() {
document.getElementById("testeagora1").innerHTML = "";
document.getElementById('contento1').style.visibility="visible";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores2() {
document.getElementById("testeagora2").innerHTML = "";
document.getElementById('contento2').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores3() {
document.getElementById("testeagora3").innerHTML = "";
document.getElementById('contento3').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores4() {
document.getElementById("testeagora4").innerHTML = "";
document.getElementById('contento4').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores5() {
document.getElementById("testeagora5").innerHTML = "";
document.getElementById('contento5').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
}
</script>
And I can't find on how to make for example: funcaosabores1 is clicked and is now visible, when I click funcaosabores2, the first one is hidden and the second is showing. But I can't click on the first one back because it was already clicked. (Idk if it's called return)
This is the div's called in the script:
<div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>
<div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>
This seems quite messy but I'm here if you guys can help me! Thanks.
The CodePen of how it is right now. #nielsdebruin

I think you just want to do something like this:
let prevButton;
let prevContent;
function toggle(e) {
if (prevButton) prevButton.style.visibility = 'visible';
prevButton = e.target;
e.target.style.visibility = 'hidden';
let id = e.target.id;
let number = id.slice(-1);
if (prevContent) prevContent.style.visibility = 'hidden';
prevContent = document.getElementById('contento' + number);
prevContent.style.visibility = 'visible';
}
<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>
<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>

Append div in button on click Javascript

Hi how to append div inside button on click this is my JavaScript:
function addLoader() {
var div = document.createElement('div');
div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
var test01 = document.createElement('button');
test01.appendChild(div);
console.log(test01);
}
I want to add innerHTML inside button tags on click
<button onclick="addLoader(this);">testt </button>
It must be like this when function is finish :
<button>testt <div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div> </button>

HTML
// Added id attribute
<button onclick="addLoader();" id = "test01">testt </button>
JS
function addLoader() {
var _div = document.createElement('div');
_div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
//append _div to button
document.getElementById("test01").appendChild(_div);
}
Working jsfiddle
EDIT
This will append element to any button call addLoader on click
function addLoader(elem) {
var _div = document.createElement('div');
_div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
elem.appendChild(_div);
}
Updated jsfiddle

var btn = document.getElementById("addLoader");
if (btn) {
btn.addEventListener('click', addLoader, false);
}
function addLoader() {
var div = document.createElement('div');
div.innerHTML = '<div class="loader"> <div class="loader-ring"> <div class="loader-ring-light"></div> </div> </div>';
this.appendChild(div);
}
<button id="addLoader">Test</button>

You just need one more line of code. The variable test01 is created in memory but not added to the DOM. You must append this new element to the DOM (ie. document.appendChild(test01))

Categories