We Keep Coding

svg map open box when click but can not close it

cant close the box
the code im using
https://codepen.io/dudleystorey/pen/vNoeyW
var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){
var province = e.target.parentNode;
if(e.target.nodeName == "path") {
for (var i=0; i < allProvinces.length; i++) {
allProvinces[i].classList.remove("active");
}
province.classList.add("active");
var provinceName = province.querySelector("title").innerHTML,
provincePara = province.querySelector("desc p");
sourceImg = province.querySelector("img"),
imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
provinceInfo.innerHTML = "";
provinceInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+provinceName+"</h1><p>"+provincePara.innerHTML+"</p>");
provinceInfo.classList.add("show");
}
})

you can set else to your code, to hide the info when click outside the map
var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){
var province = e.target.parentNode;
for (var i=0; i < allProvinces.length; i++) {
allProvinces[i].classList.remove("active");
}
if(e.target.nodeName == "path") {
province.classList.add("active");
var provinceName = province.querySelector("title").innerHTML,
provincePara = province.querySelector("desc p");
sourceImg = province.querySelector("img"),
imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
provinceInfo.innerHTML = "";
provinceInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+provinceName+"</h1><p>"+provincePara.innerHTML+"</p>");
provinceInfo.classList.add("show");
} else {
provinceInfo.classList.remove("show");
provinceInfo.innerHTML = "";
}
})

blogspot.com List of all posts of the same tag

I created a new page on my blog and I would like to add there a list of all posts which include the same tag. For example: the tag name is "game" and I am looking for an JavaScript which will list all posts with images that contain tag "game".
Here I have already a code that lists popular posts:
<div class="widget-slimecuty-popular-posts">
<ul id="popular-li-container" style="list-style-type: none; padding: 0;">
<script type="text/javascript">
function loadXML(url) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
parseResponse(xmlRequest);
}
};
xmlRequest.open("GET", url, true);
xmlRequest.send();
}
function parseResponse(xml) {
var txtData = xml.responseText;
var parserDiv = document.createElement("div");
parserDiv.innerHTML = txtData;
var posts = parserDiv.getElementsByTagName("entry");
for (var i = 0; i < posts.length; i++) {
var links = posts[i].getElementsByTagName("link");
for (var j = 0; j < links.length; j++) {
if (links[j].getAttribute("rel") == "alternate") {
makeContainer(i);
var title = links[j].getAttribute("title");
var link = links[j].getAttribute("href");
makeTitle(title, i);
makeLink(link, i);
var content = posts[i].getElementsByTagName("content");
if (content.length == 0) break;
var parserContentDiv = document.createElement("div");
parserContentDiv.innerHTML = content[0].innerText;
var imgs = parserContentDiv.getElementsByTagName("img");
if (imgs.length == 0) break;
var imgurl = imgs[0].getAttribute("src");
makeImage(imgurl, i);
break;
}
}
}
}
function makeContainer(num) {
var li = document.createElement("li");
li.style.padding = "0";
var div = document.createElement("div");
var table = document.createElement("table");
table.style.width = "100%";
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.style.height = "72px";
td1.style.verticalAlign = "middle";
var td2 = document.createElement("td");
td2.style.width = "100%";
td2.style.verticalAlign = "middle";
var a1 = document.createElement("a");
a1.id = "popular-img-" + num;
a1.href = "javascript: void(0)";
a1.target = "_blank";
var a2 = document.createElement("a");
a2.id = "popular-title-" + num;
a2.href = "javascript: void(0)";
a2.target = "_blank";
a2.style.fontSize = "15pt";
td1.appendChild(a1);
td2.appendChild(a2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
div.appendChild(table);
li.appendChild(div);
document.getElementById("popular-li-container").appendChild(li);
}
function makeLink(link, num) {
document.getElementById("popular-title-" + num).setAttribute("href", link);
document.getElementById("popular-img-" + num).setAttribute("href", link);
}
function makeTitle(title, num) {
document.getElementById("popular-title-" + num).innerText = title;
}
function makeImage(imgurl, num) {
var img = document.createElement("img");
img.style.border = "1px solid black";
img.style.width = "72px";
img.style.height = "72px";
img.style.backgroundImage = "url('" + imgurl + "')";
var image = new Image();
image.src = imgurl;
if (image.width > image.height)
img.style.backgroundSize = "auto 100%";
else
img.style.backgroundSize = "100% auto";
img.style.backgroundPosition = "50% 50%";
img.style.backgroundRepeat = "no-repeat"
img.style.display = "inline-block";
img.style.maxWidth = "none";
document.getElementById("popular-img-" + num).appendChild(img);
}
function getPopularData() {
var url = "/feeds/posts/default?orderby=published";
loadXML(url);
}
window.onload = getPopularData;
</script>
</ul>
</div>
I tried to change this code, however without programming experience in JavaScript with blogger I couldn't do much.

To get blog posts for a specific label by XML feed (as in your code) use this url
http://yourBlogUrl/feeds/posts/default/-/LabelName
In Your code:
Replace var url = "/feeds/posts/default?orderby=published";
With var url = "/feeds/posts/default/-/game";
Note: Blogger labels are case sensitive, "game" different from "Game"
<div class="widget-slimecuty-popular-posts">
<ul id="popular-li-container" style="list-style-type: none; padding: 0;">
<script type="text/javascript">
function loadXML(url) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
parseResponse(xmlRequest);
}
};
xmlRequest.open("GET", url, true);
xmlRequest.send();
}
function parseResponse(xml) {
var txtData = xml.responseText;
var parserDiv = document.createElement("div");
parserDiv.innerHTML = txtData;
var posts = parserDiv.getElementsByTagName("entry");
for (var i = 0; i < posts.length; i++) {
var links = posts[i].getElementsByTagName("link");
for (var j = 0; j < links.length; j++) {
if (links[j].getAttribute("rel") == "alternate") {
makeContainer(i);
var title = links[j].getAttribute("title");
var link = links[j].getAttribute("href");
makeTitle(title, i);
makeLink(link, i);
var content = posts[i].getElementsByTagName("content");
if (content.length == 0) break;
var parserContentDiv = document.createElement("div");
parserContentDiv.innerHTML = content[0].innerText;
var imgs = parserContentDiv.getElementsByTagName("img");
if (imgs.length == 0) break;
var imgurl = imgs[0].getAttribute("src");
makeImage(imgurl, i);
break;
}
}
}
}
function makeContainer(num) {
var li = document.createElement("li");
li.style.padding = "0";
var div = document.createElement("div");
var table = document.createElement("table");
table.style.width = "100%";
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.style.height = "72px";
td1.style.verticalAlign = "middle";
var td2 = document.createElement("td");
td2.style.width = "100%";
td2.style.verticalAlign = "middle";
var a1 = document.createElement("a");
a1.id = "popular-img-" + num;
a1.href = "javascript: void(0)";
a1.target = "_blank";
var a2 = document.createElement("a");
a2.id = "popular-title-" + num;
a2.href = "javascript: void(0)";
a2.target = "_blank";
a2.style.fontSize = "15pt";
td1.appendChild(a1);
td2.appendChild(a2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
div.appendChild(table);
li.appendChild(div);
document.getElementById("popular-li-container").appendChild(li);
}
function makeLink(link, num) {
document.getElementById("popular-title-" + num).setAttribute("href", link);
document.getElementById("popular-img-" + num).setAttribute("href", link);
}
function makeTitle(title, num) {
document.getElementById("popular-title-" + num).innerText = title;
}
function makeImage(imgurl, num) {
var img = document.createElement("img");
img.style.border = "1px solid black";
img.style.width = "72px";
img.style.height = "72px";
img.style.backgroundImage = "url('" + imgurl + "')";
var image = new Image();
image.src = imgurl;
if (image.width > image.height)
img.style.backgroundSize = "auto 100%";
else
img.style.backgroundSize = "100% auto";
img.style.backgroundPosition = "50% 50%";
img.style.backgroundRepeat = "no-repeat"
img.style.display = "inline-block";
img.style.maxWidth = "none";
document.getElementById("popular-img-" + num).appendChild(img);
}
function getPopularData() {
var url = "/feeds/posts/default/-/LabelName";
loadXML(url);
}
window.onload = getPopularData;
</script>
</ul>
</div>

Javascript: Editing a list item

I have made a to do list using vanilla JS , each list item has a delete and an edit option , delete works fine, but when I am editing a list item it is not editing the line item on which i use the edit option rather it updates the last added list item
HTML:
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail"
placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>
JS:
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function () {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementsByClassName("edit");
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p;
}
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function () {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
How do I ensure it updates the right line item?

Here lies your problem:
var entry = document.createElement("SPAN"); // <<<
...
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p; // <<< you are modifying the entry that you've just created
}
}
I don't see a need for a for loop.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var close = document.createElement("SPAN");
var cText = document.createTextNode("\u00D7");
close.className = "close";
close.appendChild(cText);
li.appendChild(close);
close.onclick = function () {
this.parentElement.style.display = "none";
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
edit.onclick = function () {
var p = prompt("Edit your entry");
var entry = this.parentElement.getElementsByClassName("userEntry")[0]; // get sibling userEntry element
entry.innerText = p;
}
li.onclick = function () {
this.classList.toggle("checked");
}
listDetail.value = "";
}
<body>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>

You have to create an ID for each specific tag, and when the user edits it uses that rather than the class.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
var cnt = 0
addBtn.onclick = function() {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
} else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.setAttribute("id", "entry" + cnt);
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.setAttribute("id", "edit" + cnt);
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementById("edit" + cnt);
editC.onclick = function() {
var p = prompt("Edit your entry");
var obj = document.getElementById("entry" + cnt);
obj.innerText = p;
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function() {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>

Style and change text content of children based on click

I am trying to style a single div and change the text content based on whether the user clicks on the item or not.
At the moment the code is extremely repetitive and I am looking for a method that will help me rewrite it to both work more efficiently and look cleaner.
Thank you.
let lvl0,
lvl1,
lvl2;
lvl0 = document.querySelector('.level-wrapper').children[0];
lvl1 = document.querySelector('.level-wrapper').children[1];
lvl2 = document.querySelector('.level-wrapper').children[2];
lvl0.addEventListener('click', changeStyle0);
lvl1.addEventListener('click', changeStyle1);
lvl2.addEventListener('click', changeStyle2);
function changeStyle0() {
document.querySelector('.text-header').textContent = levelTitle[0];
var showStyle = document.querySelector('.level-wrapper').children[0];
showStyle.style.opacity = '1';
showStyle.style.backgroundColor = '#95a5a6';
showStyle.style.border = '2px solid white';
showStyle.style.boxSizing = 'border-box';
console.log(showStyle);
}
function changeStyle1() {
document.querySelector('.text-header').textContent = levelTitle[1];
var showStyle = document.querySelector('.level-wrapper').children[1];
showStyle.style.opacity = '1';
showStyle.style.backgroundColor = '#95a5a6';
showStyle.style.border = '2px solid white';
showStyle.style.boxSizing = 'border-box';
console.log(showStyle);
}
function changeStyle2() {
document.querySelector('.text-header').textContent = levelTitle[2];
var showStyle = document.querySelector('.level-wrapper').children[2];
showStyle.style.opacity = '1';
showStyle.style.backgroundColor = '#95a5a6';
showStyle.style.border = '2px solid white';
showStyle.style.boxSizing = 'border-box';
console.log(showStyle);
}
var levelTitle = ["Question about Drinks/Soda/Water.", "Question about Portion Control/Meals.", "Question about Salt/Sugar."];

The method document.querySelector returns you only the first element in the document that fit the selector. To get an array of all the fits elements in the document, you have to use document.querySelectorAll method. For example:
const elements = document.querySelectorAll('.level-wrapper');
elemets[2].children[0].style = ...;
I think that this code is taking care of your issue:
const elements = document.querySelectorAll('.level-wrapper');
function showStyle(index, childIdx) {
elements[index].children[childIdx].style.opacity = '1';
elements[index].children[childIdx].style.backgroundColor = '#95a5a6';
elements[index].children[childIdx].style.border = '2px solid white';
elements[index].children[childIdx].style.boxSizing = 'border-box';
//console.log(levelStyle[index]);
}
function hideStyle(index, childIdx) {
elements[index].children[childIdx].style.opacity = '1';
elements[index].children[childIdx].style.backgroundColor = 'transparent';
elements[index].children[childIdx].style.border = 'none';
elements[index].children[childIdx].style.boxSizing = 'unset';
//console.log(levelStyle[index]);
}
/*for (let i = 0; i < elements.length; i++) {
for (let j = 0; j < elements[i].children.length; j++) {
showStyle(i,j);
}
}*/
for (let i = 0; i < elements.length; i++) {
for (let j = 0; j < elements[i].children.length; j++) {
(function (index) {
elements[i].children[j].onclick = function () {
elements[i].children[j].is_show = !elements[i].children[j].is_show;
if (elements[i].children[j].is_show) {
showStyle(i,j);
} else {
hideStyle(i,j);
}
}
})(j + i*elements[i].children.length);
}
}
<div class="level-wrapper">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</div>
<br><br>
<div class="level-wrapper">
<div>eee</div>
<div>fff</div>
<div>ggg</div>
<div>hhh</div>
</div>

This method ended up working for me.
Here is the Javascript:
function styleChange() {
const elements = document.getElementsByClassName("level");
for (let i = 0; i < elements.length; i++) {
elements[i].onclick = function () {
let el = elements[0];
while (el) {
if (el.tagName === "LI") {
el.classList.remove("active");
}
el = el.nextSibling;
}
this.classList.add("active");
};
}
}
styleChange();
Here is the html:
<ul class="level-wrapper">
<li class="level">
</a>1</li>
<li class="level">
</a>2</li>
<li class="level">
</a>3</li>
</ul>
And finally the css:
.active {
background-color: #95a5a6;
opacity: 1;
box-sizing: border-box;
border: 2px solid #fff;
}

passing parameter dynamically in javascript to a button event

I have a function that addRow to a table
function addRow(tableId,rowEle)
{
var tab = document.getElementById(tableId);
var hrow = tab.insertRow();
var func = null;
for (var j = 0; j < rowEle.length; j++) {
var newTD = document.createElement("TD");
var elem = document.createElement(rowEle[j].desc);
elem.type = rowEle[j].type;
elem.type == "button" ? elem.value = rowEle[j].label : false;
rowEle[j].action != undefined ? elem.setAttribute(rowEle[j].action[0],rowEle[j].action[1]): false;
elem.style = rowEle[j].cssStyle;
newTD.appendChild(elem);
hrow.appendChild(newTD);
}
}
and my declaration looks like this
var eobject = new Object();
eobject.desc = "input";
eobject.type = "button";
eobject.label = "+";
eobject.action = new Array("onclick","addRow('tbl1',eleme)");
eobject.cssStyle = "width : 100%; border: 0px none; background-color:lightgreen;";
eleme.push(eobject);
** My Working Solution **
Thanks everyone for your help.