I'm trying to render the result of the function renderVerticalCards, but nothing is returned in the DOM, other than the outer divs (those from outside the function call). I have confirmed through the console, that the function is being called, so I'm guessing that my problem has to do with my use of curly brackets, but I have not been able to find a solution. Any suggestions?
view({ attrs }) {
console.log("In view", attrs);
console.log(attrs);
const renderVerticalCards = (cards) => {
console.log("in function")
return(
cards.map(card => {
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
<div class="process-card__number-container">
<div class="process-card__number-container__circle">
<div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
</div>
</div>
<div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
<div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
<a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>
</div>
})
)
}
return (
<div class="mdc-layout-grid" style="padding-top:0">
<div class="mdc-layout-grid__inner">
{ renderVerticalCards(this.cards) }
</div>
</div>
)
}
Try:
cards.map(card => {
return (
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
<div class="process-card__number-container">
<div class="process-card__number-container__circle">
<div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
</div>
</div>
<div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
<div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
<a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>
</div>
);
})
Related
Here is the html container:
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Text 1
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Text 2
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Text 3
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11"> Text 4
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11"> Text 5
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
</div>
The paragraphs should be "visible" when text-event class clicked. Text style class is "hidden" by default. I did that already with other div boxes and it worked. Is there a 'p' declaration missing in the loop function? There is not even a console feedback when I pass the textEvent variable to the console.
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) (function (j) {
textEvent[j].addEventListener('click', onclick);
textEvent[j].onclick = function (ctrls) {
ctrls.forEach(ctrl => {
/* ctrl.getElementsByClassName('p')[0].innerHTML; */
ctrl.document.getElementsByClassName('text-style-11').style.visibility = "visible";
})
}
})(j);
I could not understand very well your code but this is how I would do it.
First get all the element with class "text-event"
loop over that array and add an event listener to each of them.
When you click in one of them select the element with the class of text-style-11
To something to that element.
const textContainers = document.querySelectorAll(".text-event");
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.style.visibility = "hidden";
});
});
Instead of adding styles directly, I recommend you to create a class and use classList toggle to add and remove that class.
textContainers.forEach((element) => {
element.addEventListener("click", () => {
const textElement = element.querySelector(".text-style-11");
textElement.classList.toggle("show");
});
});
I have tested this code it should work fine:
const textEvent = document.querySelectorAll('.text-event');
for (var j = 0; j < textEvent.length; j++) {
textEvent[j].addEventListener('click', (el) => {
const clickedElement = el.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
}
You've already got a valid answer.. by the way here's the live snippet using the proper strategy to add an event listener to all your .text-event elements that will hide the inner paragraph embedded in the clicked box:
document.querySelectorAll('.text-event').forEach((el) => {
el.addEventListener('click', (event) => {
const clickedElement = event.currentTarget;
const innerParagraph = clickedElement.querySelector('.text-style-11');
innerParagraph.style.visibility = 'visible';
});
});
.text-event {
border: dotted gray 3px;
margin-bottom: 2px;
cursor: pointer;
}
.text-style-11{
visibility: hidden;
}
<div class="arrow-1">
<div class="text-event">
<p class="text-style-11">Alle Personen, die nicht sozialversicherungspflichtig beschäftigt sind (Beamte, Selbstständige, etc.)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-2">
<div class="text-event">
<p class="text-style-11">Einmalige Wartezeit 1 Monate
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-3">
<div class="text-event">
<p class="text-style-11">Keine Karenzzeit
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-4">
<div class="text-event">
<p class="text-style-11">Versichert sind nur Erstdiagnosen während der Versicherungslaufzeit (Herzinfarkt, Schlaganfall, Krebs, Blindheit oder Taubheit)
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
<div class="arrow-5">
<div class="text-event">
<p class="text-style-11">Übernahme des noch ausstehenden Restsaldos von bis zu 135.000 €
</p>
</div>
<div class="arrow">
<div class="diamond">
</div>
</div>
</div>
again, probably a terrible title - but what I'm trying to do is to make a simple search feature on my website. You click a nav button, which updates the search bar, whi in turn triggers an onchange event to update the current appended list.
function update() {
var list = $("#comic__modern-list");
list.empty();
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var filter = comics[this].type;
var publisher = comics[this].publisher;
if (search == "") {
if(filter == "modern") {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
} else if (search == publisher) {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
});
}
The current list is generated by this, which works fine:
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var currentObject2 = comics[this].type;
console.log(currentObject2);
if (search == "") {
if(currentObject2 == "modern") {
var list = $("#comic__modern-list");
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
}
});
From what I can gather, this has to do with the keyword "this" no longer meaning what it did when it was outside of the function, so I'm assuming the fix will be to do with bind(), but I can't make heads nor tails of it.
p.s, if there's an easier/simpler way to set up a search system, please enlighten me!
I want to have a line of text "oh no you are staving" to show up only after all items are removed. So in this case it means all the function are executed. Do I have to create a if statement?
Sorry I am really new to programming so I know my code is very wonky. Thanks for helping still!
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src= "images/kroket.jpg">
<div><h5 id="foodName">Kroket</h5>
<button class="ateBtn" onclick="ateKroket()">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src= "images/cake.jpg">
<div><h5 id="foodName">Cake</h5>
<button class="ateBtn" onclick="ateCake()">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src= "images/pizza.jpg">
<div><h5 id="foodName">Pizza</h5>
<button class="ateBtn" onclick="atePizza()">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src= "images/sushi.jpg">
<div><h5 id="foodName">Sushi</h5>
<button class="ateBtn" onclick="ateSushi()">Ate</button>
</div>
</div>
Add the following:
(To HTML):
<div id="foodEaten" style="display:none;">4</div>
(Then to your Javascript):
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
checkFood()
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
checkFood()
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
checkFood()
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
checkFood()
}
function checkFood(){
var foodLeft = parseInt(document.getElementById('foodEaten').innerHTML);
foodLeft = foodLeft-1;
document.getElementById('foodEaten').innerHTML = foodLeft;
if(foodLeft<1){
console.log("starving");
//DO WHATEVER YOU WANT WHEN NO FOOD LEFT
}
}
What this will do is edit an invisible counter of food left each time a button is clicked, and then action something if that counter is a certain value
You should make use of classes to make your code more maintainable/reusable wihout repetition. Here is an example where I added a food class to each food div:
var foodStorage = document.getElementById('foodStorage'),
ateBtns = document.querySelectorAll('.ateBtn');
ateBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
foodStorage.removeChild(this.closest('.food'));
if (foodStorage.children.length === 0) {
alert('Oh no, you are starving!');
}
});
});
<div id="foodStorage">
<div class="food">
<div><h5>Kroket</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5 id="foodName">Cake</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5>Pizza</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div class="food">
<div><h5>Sushi</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
</div>
You could declare a variable counter:
var food = 4;
function ateKroket() {
var delFood = document.getElementById("kroket");
delFood.remove();
checkfood()
}
function ateCake() {
var delFood = document.getElementById("cake");
delFood.remove();
checkfood()
}
function atePizza() {
var delFood = document.getElementById("pizza");
delFood.remove();
checkfood()
}
function ateSushi() {
var delFood = document.getElementById("sushi");
delFood.remove();
checkfood()
}
function checkfood() {
food--;
if (food === 0) {
document.getElementById("starving").style.display = "block";
}
}
#starving {
display: none;
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src="images/kroket.jpg">
<div>
<h5 id="foodName">Kroket</h5>
<button class="ateBtn" onclick="ateKroket()">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src="images/cake.jpg">
<div>
<h5 id="foodName">Cake</h5>
<button class="ateBtn" onclick="ateCake()">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src="images/pizza.jpg">
<div>
<h5 id="foodName">Pizza</h5>
<button class="ateBtn" onclick="atePizza()">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src="images/sushi.jpg">
<div>
<h5 id="foodName">Sushi</h5>
<button class="ateBtn" onclick="ateSushi()">Ate</button>
</div>
</div>
<div id="starving">
oh no you are starving
</div>
</div>
Or something much more optimized:
document.getElementById("foodStorage").addEventListener("click", function(e) {
if (e.target.classList.contains("ateBtn")) {
e.target.parentElement.parentElement.remove();
if (this.childElementCount === 1) {
document.getElementById("starving").style.display = "block";
}
}
});
#starving {
display: none;
}
<div id="foodStorage">
<div id="kroket">
<img class="foodImg" src="images/kroket.jpg">
<div>
<h5 id="foodName">Kroket</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="cake">
<img class="foodImg" src="images/cake.jpg">
<div>
<h5 id="foodName">Cake</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="pizza">
<img class="foodImg" src="images/pizza.jpg">
<div>
<h5 id="foodName">Pizza</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="sushi">
<img class="foodImg" src="images/sushi.jpg">
<div>
<h5 id="foodName">Sushi</h5>
<button class="ateBtn">Ate</button>
</div>
</div>
<div id="starving">
oh no you are starving
</div>
</div>
I am having a problem where I am trying to use an array of data to render a <ul> element. In the code below the console.log's are working fine, but the list items aren't appearing.
<ul className="comments">
{
userComments && userComments.comments.data && userComments.comments.data.map(comment =>{
{console.log("users", comment.user)}
<li className="wraper" key={comment.id}>
<div className="comments-description">
<div className="comments-photo">
<img src="http://randomuser.me/api/portraits/men/84.jpg" alt="" />
</div>
<div className="comments_wrapper">
<div className="comments_details">
<h1>Mike Ross {comment.user}</h1>
<span className="days">testa</span>
</div>
<div className="comments_text">
{comment.value}
</div>
<div className="comments_edit-delete">
<button className="btn-danger">Delete</button>
<button className="btn-success">Edit</button>
</div>
</div>
<div className="comments_line"></div>
</div>
</li>
})
}
</ul>
Note: The data looks like this :
What am I doing wrong here?
Either use:
.map(comment => (<ul> ... </ul>))
or
.map(comment =>({
return (<ul> ... </ul>)
})
The brackets are wrong. Wrap your JSX in the round brackets ( )
.map(comment =>( <li> ... </li>)
The snippet is
function addTabItems(tab, items) {
const tabItems = items.map((item) => `
<div class="bvb-cmp-grid__item">
<div class="bvb-comp-grid__item-head">
<img alt="grid-item" src="${item['image']}" class="bvb-cmp-grid__item-img">
<div class="bvb-cmp-grid__item-title">${item['title']}</div>
</div>
<div class="bvb-comp-grid__item-blocks">
${item['items'].map((block) => `
<div class="bvb-comp-grid__item-block">
<div class="bvb-comp-grid__item-block-title">${block['title']}</div>
<div class="bvb-comp-grid__item-block-content">${block['content']}</div>
</div>
`).join('')}
</div>
</div>
`).join('');
const $tabContent = $(`[data-bvb-cmp-grid-tab-content="${tab}"]`);
$tabContent.append(tabItems);
}
Need to achieve - building template by correct way.
How to escape attribue value src="${item['image']}" for preventing XSS atack?