We Keep Coding

document.getElementById issues with for loop

My code fetches data from the backend API
for (var i = 0; i < myObj.length; i++) {}
stored object i want to display in variables and im able to display them accordingly
everything is fine until here
but I want to display the description in a popup
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
based on this tutorial I have implemented the same
html1 += ` <div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">${desc}</span>
</div>
<p > ${desc}</p>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}</script>
`;
but when I clicked on it I expected different cards to show different data accordingly but instead, it's just showing the data of the first card element
when clicked on the second one only the first card element pops up with only that particular data of that card
I thought the issue could be because of ID so gave dynamic variables as id
but it's of no use When clicked nothing is coming up
not even error
is there any way where we can display dynamic data based upon the card in that popup

IDs must be unique
Use the loop number to make a unique call to the function, and give each span its own ID.
html1 += ` <div class="popup" onclick="myFunction('${i}')">Click me to toggle the popup!
<span class="popuptext" id="myPopup-${i}">${desc}</span>
</div>
<p > ${desc}</p>
and you only need one script block for all of them
<script>
function myFunction(id) {
var popup = document.getElementById("myPopup-"+id);
popup.classList.toggle("show");
}</script>

I think it's because you are reusing the same id. In html element IDs have to be unique. You could try to append a sequence number to id="myPopup" as you loop, e.g. id="myPopup1", id="myPopup2" etc...

The problem is because you are using the id property. For that reason the first object works and the others no, Javascript takes the id an use it for the first that find and it discart the others.
Try giving the action by class to every button. Something like this:
const buttons = [...document.querySelectorAll('.btn-toggle')]
buttons.forEach(button => button.addEventListener('click', e => click(e)))
const click = e => e.target.parentElement.children[1].classList.toggle('show')
.show {
color: red;
display: block!important;
}
.hide{
display: none
}
<div>
Hello from div 1
<button class="btn-toggle">Toggle</button>
<div class="hide">Toggle!</div>
</div>
<div>
Hello from div 2
<button class="btn-toggle">Toggle</button>
<div class="hide">Toggle!</div>
</div>
<div>
Hello from div 3
<button class="btn-toggle">Toggle</button>
<div class="hide">Toggle!</div>
</div>

As everyone wrote, id is to be unique to work properly.
If you change your css to react to .popup.show it would become more simple:
//REM: this = div.popup
function myFunction(div){
div.classList.toggle('show');
}
.popup span{
display: none
}
.popup.show span{
display: block
}
<div class = 'popup' onclick = 'myFunction(this)'>click<span>clicked</span></div>

HTML/JS open new url in half the page

I'm using HTML, CSS and Javascript. My page is divided into two vertical columns. On the right side, I have buttons that, when clicked, do add a sentence on the left side. What I want to do is, when I click a button, the sentence on the left side is printed AND the content on the right side changes. I tried just making a new url, but it changes de content of the whole page.
EDIT: what I want to do is like the software (point of sales) that restaurants use. One side is the receipt, the other is where the waitress clicks on the food and beverages and they appear on the receipt.
This is what I have, but none of it is about the new change in the column content:
function artfato() {
var x = document.getElementById("myDIV");
x.innerHTML = "1 Fato"
}
<div class="row">
<div class="column" style="background-color:#bbb;">
<h3>Ticket nº1</h3>
<p id="myDIV"></p>
</div>
<div class="column">
<table id="table">
<tr>
<td>
<input type="button" value="Fatos" class="ixbt" onclick="artfato();">
</td>
<td>
<input type="button" value="Calças" class="ixbt" onclick="artfato();">
</td>
</tr>
</table>
</div>
</div>

It seems your code currently is changing the contents of id="myDiv". Not sure exactly what you're looking for, but you most likely want to append something to each or one of your columns instead of overwriting it.

I am not sure if you looking for that, but here we go.
First of all, change the "myDiv" from paragraph to div.
<div id=myDiv></div>
After this you can change the event function (artfato) to something as below:
var x = document.getElementById("myDIV");
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left = "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";
x.appendChild(makeIframe);
style.position = "relative";
makediv.style.overflow = "hidden";
Do not forget to set the position attribute relative and absolute, to maintain the iframe inside div.
If you want to get content from your own origin (domain/application), try this:
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
font: stackoverflow answer

How to hide an element in if statement?

I am making an html change to a CMS that will affect all pages when the changes are live. I would like this html alert to only affect 1 specific page. I am attempting to do an if statement for the page title.
The logic is that if the page title is Test Article Two then show the html that I have put in place, if not then display=none. With this logic in place, I am viewing the html on all pages not just the one I want it to show.
<div class="container">
<div class="title-wrapper">
<span id="article-banner-country">#countryFullText</span> /
<span id="article-banner-category">#subCatText</span>
<div id="article-banner-title">#pageTitle</div>
<!--page alert -->
<div class="feedback-container content-desktop" id="alert-dialog">
<div class="feedback-left">
<p>Have any feedback? Reach out to us!</p>
</div>
<div class="feedback-right">
<button class="feedback-button">Give Feedback</button>
<button class="feedback-button">Dismiss</button>
</div>
</div>
</div>
</div>
<script>
function showAlert() {
if(#pageTitle === "Test Article Two") {
document.getElementById('alert-dialog').style.display = 'block';
}else {
document.getElementById('alert-dialog').style.display = 'none';
}
}
</script>

I'd recommend changing a class on the body element so that you can use CSS for the styling.
HTML: nothing really changed here
<body>
<div class="container">
<div class="title-wrapper">
<span id="article-banner-country">#countryFullText</span> /
<span id="article-banner-category">#subCatText</span>
<div id="article-banner-title">#pageTitle</div>
<div class="feedback-container content-desktop" id="alert-dialog">
<div class="feedback-left">
<p>Have any feedback? Reach out to us!</p>
</div>
<div class="feedback-right">
<button class="feedback-button">Give Feedback</button>
<button class="feedback-button">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
</body>
javascript: just check the document.title and add the class the the body element
<script>
if(document.title === "Test Article Two") {
document.body.classList.add("show-alert");
}
</script>
Use CSS for the styling. Always hide #alert-dialog and only show it when we add the class to the body.
<style>
#alert-dialog {
display: none;
}
.show-alert #alert-dialog {
display: block;
}
</style>

If you are making static pages or using server side rendering, you could add logic to add a class to show or hide the alert element without adding more javascript to the page. It will have the relevant class(es) when the html is generated and delivered. This way you won't have to create a function, call it and manipulate the DOM after everything is rendered.
I may have missed this in the code above, are you calling the showAlert function anywhere? If not, your alert won't be shown (or will be shown depending on the default styles).
One thing I'd caution against is the imperative nature of the code here. If you wanted to reuse this alert functionality on another page, you'd have to add another more logic to detect another page title every time you wanted to use the alert. Since you are using a CMS, you might consider adding a flag to show the alert, and on this specific page, turn that flag on.
If you wanted to use the function strategy, I'd set your default alert styles:
#alert-dialog {
display: none;
}
.show {
display: block;
}
and try something like this:
<script>
function showAlert() {
if(document.title === "Test Article Two") {
document.getElementById('alert-dialog').classList.add('show');
}
}
document.addEventListener("DOMContentLoaded", showAlert);
</script>
Another alternative is to take a look at the path of the page this is supposed to be on (window.location.pathname) and using regex to see if it matches what you want. I'd recommend that over looking at the title since it's more likely the title of the page will change rather than the url.

In JavaScript, you can access the page title with document.title. You should change the script like this:
function showAlert() {
if(document.title === "Test Article Two") {
document.getElementById('alert-dialog').style.display = 'block';
} else {
document.getElementById('alert-dialog').style.display = 'none';
}
}

I want to change text with a button

I want to provide all my posts on my blog in 2 languages. I found a way to change the text into another language with buttons. But I can't put any images or other css styles in the text that changes. Then the buttons don't work anymore.
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. I can't put any css or html in here';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another language';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
Is there a way I can make something like this but with a code where I'm able to put images, font styles,... in the code?.
Or is there maybe a way to only change the text. And leave the images with multiple divs?
TEXT (changes)
IMAGE
TEXT (changes)
http://oihanevalbuenaredondo.be/2017/01/17/current-favorites-voorbeeld/ --> this is an example of a post i want in 2 languages. I need multiple images, al the text in the post needs to be changed from one language to another, with buttons

You need to iterate over all the children of your element. Using JQuery, and assuming just one level of descendants, you could use something like this...
$('#chgtxt').children().each( function() {
var oldtext = $(this).text();
if (oldtext) {
var newtext = oldtext+" CHANGED. ";
$(this).text(newtext);
}
});

You can create your own using this simple code, it simply gets an entry and replace it by it's value in the array. Ex :
var lang = {
"helloWorld": {
en: "Hello World",
fr: "Bonjour monde"
},
"mynameis": {
en: "My name is",
fr: "Mon nom est"
}
}
$(document).ready(function(){
$(body).find('.trn').each(function($elem){
var currentLang = 'en';
$($elem).html(lang[$($elem).data('trn')][currentLang]);
});
});
For each text your need to add a data with the key and a class trn, just like this.
<span class="trn" data-trn="mynameis"></span> Nicolas
Check this link for more informations
hopes it helps !
Nic

You have a single quote in the text of the first onclick "can't" which is causing the javascript to think that it is the end of the string.
You need to add a backslash "can\'t"
<button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>This is the default text. I can\'t put any css or html in here';">English</button>  <button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>Text changed into Another language';">Other language</button>
<div id="chgtext"><p>Blue</p>This is the default text. I can't put any css or html in here</div>
<style>
p {color:blue;}
</style>

You need to escape all quotes inside of inserted content. Have a look at snippet and try to click on buttons
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> NOW I can put any css or <span style=\'color :red;\'>html</span> in here';">English</button>  
<button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Other language</button>
<div id="chgtext">This is the default text. I can't put any css or html in here</div>
<p>
<style>
#eng_lang {
display: block;
}
#nl_lang {
display: none;
}
</style>
<button onclick=" document.getElementById('eng_lang').style.display='block'; document.getElementById('nl_lang').style.display='none'">English</button>   <button onclick="document.getElementById('eng_lang').style.display='none';document.getElementById('nl_lang').style.display='block'">Nederlands</button></p>
<div id="eng_lang">
<h2>Here is some text
<span style="color: green;">english</span>
</h2>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo2yKPonCY-BZrk9s69oH_-gal_yxDRgHxdyXhqP79D0YESVuB" width="120px" height="120px">
Now you can place here any text, tags and images.
</div>
<div id="nl_lang">
<h2>Here is another text
<span style="color: blue;">Netherlands</span>
</h2>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQcE1c0chXugmq_V5qwp51ffAuP7ecGMsWmshnntwAXVGUgVptH" width="100px" height="100px">
Put here whatever you want.
<p>This is paragraph</p>
</div>

HTML - Button is cancelled only after second click

I have a very simple code: I want to cancel a button after it's clicked to display something else. I tried this way
HTML:
<div id="container">
<input type="button" value="New game" onclick="newGame()" />
</div>
js:
function newGame() {
var container = document.getElementById("container");
container.removeChild(container.childNodes[0]);
}
What happens is the button gets cancelled only if I click it two times. Where did I get wrong?
I'm sorry if this is a repost, I tried to check but didn't find a quetion identical to mine

It appears as if your code is going to remove the button once you click on it. Is this correct, or are we not looking at the full markup?

If you remove \n (i.e new line) your code will work
try like this
function newGame() {
var container = document.getElementById("container");
debugger;
container.removeChild(container.childNodes[0]);
}
<div id="container"><input type="button" value="New game" onclick="newGame()" /></div>
The reason why your code is not working is, when you hit enter after div, HTML DOM will automatically creates one dummy text node as it's child. hence your input node became the second child for your container.
Working fiddle
Hope it helps :)

try this:
function newGame() {
var container = document.getElementById("container");
// change 0 to 1
container.removeChild(container.childNodes[1]);
}
container.childNodes[0] is a text Node, in which the text is Newline

I gave id to the button and removed it using id.
In your case it is not removing in first time because container.childNodes[0] in first time is not a button. Try your self using console.log in your function.
function newGame() {
var container = document.getElementById("container");
var d_nested = document.getElementById("button_1");
var throwawayNode = container.removeChild(d_nested);
//container.innerHTML='';
}
<div id="container">
<input id="button_1" type="button" value="New game" onclick="newGame()" />
</div>

Alternatively, you could do this:
<div id="container">
<input type="button" value="New game" onclick="document.getElementById('container').removeChild(this);" />
No separate JS file needed.