I am having trouble with formatting my html code

Question

function displayRestaurants() {
    var table = document.getElementById("restaurantsTable");

If you scroll all the way to the right you will see a backslash. I need help if there is a way to code it without these backslashes \ ?

    table.innerHTML = "";
    totalRestaurants = restaurants_array.length;
    for (var count = 0; count < totalRestaurants; count++) 
    {
            var rimg =  restaurants_array[count].restaurant_img;
            var name = restaurants_array[count].name;

            var cell = '<div class="col-md-10" style="float: none; margin: 0 auto;"> <h3><span>' + name + '</span>    </h3>                                                                                                                                                                                                 \
                            <div class="flip-container" >                                                                                                                                                                                                                                                                \
                                <div class="flipper">                                                                                                                                                                                                                                          \
                                    <div class="front">                                                                                                                                                                                                                                 \
                                        <a id="restaurants" href="#" data-toggle="modal" data-target="#movieModal" item=' + count + '>                                                                                                                                                      \
                                            <img class="img-fluid img-thumbnail" src=' + rimg + ' />                                                                                                                                          \
                                        </a>                                                                                                                                                                                                                                     \
                                    </div>                                                                                                                                                                                                                                                   \
                                    <div class="back">                                                                                                                                                                                                                                           \
                                        <div class="bg-dark mystyle text-center py-3" >                                                                                                                                                         \
                                                                                                                                                                                                                                             \
                                            <button href="#" data-toggle="modal" data-target="#movieModal" item="' + count + '" type="button" class="btn btn-primary btn-sm" onClick="showMovieDetails(this)" >See More</button>                    \
                                            <button href="#" data-toggle="modal" data-target="#commentModal" item="' + count + '" type="button" class="btn btn-primary btn-sm" onClick="showMovieComments(this)" >Comments</button>                     \
                                        </div>                                                                                                                                                                                                                                 \
                                    </div>                                                                                                                                                                                                                                               \
                                </div>                                                                                                                                                                                                                                                           \
                            </div>                                                                                                                                                                                                                                                                          \
                        </div>';

            table.insertAdjacentHTML('beforeend', cell);
           
    }
}

In your text editor use a multiline caret (Ctrl+Alt key + arrow in VSCode). Select al llines, than hit END on your keyboard. Now all the carets should be after every slash character. Than replace wherever you have something like `' + count + '` into `${count}` and most important of all, use Template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals - meaning, replace the two wrapping singleQuotes `'` into backticks `\``. — Roko C. Buljan, Jan 24 '21 at 11:23

Roko C. Buljan · Answer 1 · 2021-01-24T11:38:24.500

Use template literals

var cell = `
<div class="col-md-10" style="float: none; margin: 0 auto;">
  <h3><span>${name}</span></h3>                                                                           
  <div class="flip-container">                                                                           
    <div class="flipper">                                                                                 
      <div class="front">
        <a id="restaurants" href="#" data-toggle="modal" data-target="#movieModal" item="${count}">
          <img class="img-fluid img-thumbnail" src="${rimg}" />
        </a>
      </div>
      <div class="back">
        <div class="bg-dark mystyle text-center py-3">
          <button data-toggle="modal" data-target="#movieModal" item="${count}" type="button" class="btn btn-primary btn-sm" onClick="showMovieDetails(this)">See More</button>
          <button data-toggle="modal" data-target="#commentModal" item="${count}" type="button" class="btn btn-primary btn-sm" onClick="showMovieComments(this)">Comments</button>
        </div>
      </div>
    </div>
  </div>                                                                                                   
</div>
`;

Also,

avoid using inline CSS style
<button> cannot have a href="" attribute
and remove the inline JS's on* handlers.

<button item="${count}" type="button" class="app-btn-details btn btn-primary btn-sm" data-toggle="modal" data-target="#movieModal" >See More</button>
<button item="${count}" type="button" class="app-btn-comments btn btn-primary btn-sm" data-toggle="modal" data-target="#commentModal" >Comments</button>

const ELS_btnDetails = document.querySelectorAll(".app-btn-details");
const ELS_btnComments = document.querySelectorAll(".app-btn-comments");

ELS_btnDetails.forEach((EL) => EL.addEventListener("click", showMovieDetails)); 
ELS_btnComments.forEach((EL) => EL.addEventListener("click", showMovieComments));

I am having trouble with formatting my html code

1 Answers1