0
<template id="entry-temp">
    <li id="movie-list">
        <span id="movie-info"> <span id = "li-movie-title"></span> (<span id = "li-movie-year"></span>) - <span id = "li-movie-rating"></span></span>
        <button type="submit" id="movie-edit" name="movie-edit">edit</button>
        <button type="submit" id="movie-delete" name="movie-delete">delete</button>
    </li>
</template>



function appendMovie(title, year, rating) {
    let template = document.querySelector("#entry-temp");
    let tempNode = document.importNode(template.content, true);
    tempNode.querySelector("#li-movie-title").innerHTMl = title;
    tempNode.querySelector("#li-movie-year").innerHTMl = year;
    tempNode.querySelector("#li-movie-rating").innerHTMl = rating;

    let moviePanel = document.getElementById("movie-panel");
    alert(tempNode.innerHTMl);
    moviePanel.appendChild(tempNode);
}

The alert gives me undefined, and tempNode is a document fragment.

Also, is there a better way to print out the tag in JavaScript for debugging? For example, How can I check if I really write title, year, and rating?

rrk
  • 15,677
  • 4
  • 29
  • 45
echo Lee
  • 191
  • 1
  • 2
  • 10
  • Are you sure the `innerHTML` in `alert` statement is not a spelt incorrectly in your original code? – Rahul Bharadwaj Nov 19 '19 at 05:08
  • You can use `console.log` instead of `alert`. It will print into browser's console (Press F12 on Chrome/Firefox, click Console tab and see the outputs print in real time). Also see: https://stackoverflow.com/questions/8203473/why-is-console-log-considered-better-than-alert – Rahul Bharadwaj Nov 19 '19 at 05:12
  • 1
    hmm good catch.. It's the spelling.... Thanks for y'all time...... – echo Lee Nov 19 '19 at 05:16

0 Answers0