CODEWITHSUNDEEP
javascript
Adam Bell
Adam Bell

Reputation: 1045

JavaScript: Getting HTML to appear inside of a var statement / function

I know this gets asked a lot and I've already tried some examples from SO, but no luck.

I have a function that allows me to change text in a div and it works, but only as plain text. I want it to work as HTML, but I've tried placing in innerHTML, perhaps in the wrong spot, and separated HTML in my script with + symbols. Nothing seems to work. Either I get the HTML in my text raw or the function simply does not work.

Here's my script as of this time:

$(function() {
  var copyStack = [
    '<strong>This is bold text within strong tags,</strong>' + ' this is the remainder of my copy.',
    '<strong>This is more bold text within strong tags,</strong>' + ' this is the remainder of my second copy.'
  ];
  $("#swatch-0").click(function () {
     $(".product-shop-description").text(copyStack[0]);
     console.log(copyStack[0]);
 });
 $("#swatch-1").click(function () {
     $(".product-shop-description").text(copyStack[1]);
     console.log(copyStack[1]);
 });
});

Upvotes: 0

Views: 61

Answers (2)

Adam Bell
Adam Bell

Reputation: 1045

Solved it! Thanks to some help and some guesswork, here's the answer:

$("#swatch-0-peanut-butter-chocolate-chip").click(function () {
 $(".product-shop-description").html(copyVariety[0]);
 console.log(copyVariety[0]);
});

Upvotes: 0

kushagra-aa
kushagra-aa

Reputation: 570

I think This is what you want to do:

var copyStack = [
    '<strong>This is bold text within strong tags,</strong>' + ' this is the remainder of my copy.',
    '<strong>This is more bold text within strong tags,</strong>' + ' this is the remainder of my second copy.'
  ];
swatchOne = document.getElementById("swatch-0");
const changeInnerHTML = (elm, inner) => (elm.innerHTML = inner);
swatchOne.addEventListener("click", () => {
  changeInnerHTML(swatchOne,copyStack[0]);
});
swatchTwo = document.getElementById("swatch-1");
swatchTwo.addEventListener("click", () => {
  changeInnerHTML(
    swatchTwo,copyStack[1]);
});
.btn{
    background: #cecece;
    padding: 1em;
    width: max-content;
    margin-bottom:1em;
}
#swatch-0{
    background: #000;
    color:#fff
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class='btn' id='swatch-0' >Hello</div>
    <div class='btn' id='swatch-1' >Hello22</div>
    <script src="./script.js"></script>
</body>
</html>

The getElementById property is used to access an HTML element

more info [HERE][]

The innerHTML property is used to access and modify the HTML inside of an HTML element

more info HERE

Upvotes: 2

Related Questions