Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Steve Pierce
Steve Pierce
Courses Plus Student 1,091 Points

JavaScript - How do I insert the value of a variable after the element's opening tag?

Instructions as follow: Using JavaScript write the HTML code for the inline element showing the sky image to use in the web page. Create a variable named imgStr that stores the following text string

<img src='sd_skyMap.png' />

where Map is the value of the mapNum variable. Use the + operator to combine text strings together and be sure to include the single quote character within the text strings.

For the page element with the ID planisphere, use the insertAdjacentHTML() to insert the value of the imgStr variable directly after the element's opening tag.

HTML Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Star Dust Stories: Using a Planisphere</title> <link href="sd_base.css" rel="stylesheet" /> <link href="sd_layout.css" rel="stylesheet" /> <script src="sd_mapper.js" defer></script> </head>

<body> <header> <nav class="horizontal"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Astronomers</a></li> <li><a href="#">Moons</a></li> <li><a href="#">Planets</a></li> <li><a href="#">Stars</a></li> <li><a href="#">Physics</a></li> </ul> </nav> <img src="sd_logo.png" alt="SkyWeb" /> </header> <section id="left"> <article> <h1>The Planisphere</h1> <p>A <strong>planisphere</strong> is a visual aid to astronomers and stargazers. It consists of two disks: One displays all of the visible constellations in the night sky, and the other covers the first and contains a window that indicates the portion of the sky currently visible. The second disk is then rotated to match the current date and time. Planispheres come in a variety of sizes and types. The important thing to remember is that you must have a planisphere that matches the longitude of your stargazing location. </p> <p>On the right is an online planisphere. It consists of two images laid on top of one another. The top image is the viewing disk of the planisphere. The bottom image contains the sky map. This planisphere is automatically rotated for you, displaying the current date and time and visible constellations for observers at a longitude of 40<sup>°</sup> North. To use a planisphere, hold directly overhead with the arrow facing north as indicated on the viewing disk.</p> </article> </section> <section id="right"> <div id="planisphere"> <img id="mask" src="sd_mask.png" alt="" /> <div id="timeStamp">March 1, 2018 4:53 PM</div> </div> </section> <footer> Star Dust Stories © 2018 English (US) <span><a href="#">About</a> <a href="#">Developers</a> <a href="#">Privacy</a> <a href="#">Terms</a> <a href="#">Help</a></span> </footer> </body> </html>

CSS Stylesheet - sd_base

@charset "utf-8";

/* Basic styles to be used with all devices and under all conditions */

address, article, aside, blockquote, body, cite, div, dl, dt, dd, em, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, html, img, li, main, nav, nav a, ol, p, section, span, ul { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Set the default page element styles */

body { margin: 0px; width: 100%; }

body {

font-family: Verdana, Geneva, sans-serif; font-size: 100%; font-weight: inherit; line-height: 1.2em; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;

}

ul, ol { list-style: none; }

nav ul { list-style: none; list-style-image: none; }

nav a { text-decoration: none; }

CSS Stylesheet - sd_layout

@charset "utf-8";

/* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 4 Case Problem 1

Star Dust Stories Layout Styles

Filename: sd_layout.css

*/

html { background: url(sd_back.png) 100%/cover fixed; }

strong { font-weight: bold; }

p a { text-decoration: underline; }

body { background: url(sd_stars.png) rgb(51, 51, 51); color: rgb(231, 231, 231); float: none; margin: 0px auto; width: 90%; max-width: 1000px; min-width: 640px; margin-top: 30px; }

header { width: 100%; }

header nav.horizontal { width: 100%; }

header nav.horizontal li { background-color: rgb(41, 41, 41); display: block; font-family: Tahoma, Geneva, sans-serif; float: left; width: 16.66%; }

header nav.horizontal li a { color: white; display: block; font-size: 0.8em; height: 50px; letter-spacing: 0.1em; line-height: 50px; text-align: center; width: 100%; }

header nav.horizontal li a:visited, header nav.horizontal li a:link { color: white; }

/* Navigation List Styles */

body > header a { background-color: rgb(51, 51, 51); border: 5px outset rgb(211, 211, 255); }

body > header:active, body > header a:hover { background-color: rgb(51, 51, 151); }

header img { clear: left; display: block; margin: 5px auto; }

/* section layout */ section#left { float: left; width: 50%; }

section#right { float: left; width: 50%; }

footer { clear: left; width: 100%; }

/* left section */

section#left article { width: 95%; margin: 0px auto; }

section#left article h1 { font-size: 34px; font-family: 'Courier New', courier, monospace; font-weight: bold; margin: 20px 0px 20px 20px; }

section#left article p { margin: 0px 0px 20px 20px; font-family: Verdana, Geneva, sans-serif; }

/* right section */

div#planisphere { position: relative; width: 100%; }

div#planisphere img { display: block; position: absolute; top: 40px; left: 10%; width: 75%; }

div#timeStamp { position: absolute; top: 5px; left: 30%; }

/* footer styles */ footer { border-top: 2px solid rgb(171, 171, 171); clear: left; margin-top: 15px; background-color: rgb(71, 71, 71); text-align: right; }

footer, footer span a { color: rgb(231, 231, 231); font-size: 11px; padding: 10px; }

JavaScript

"use strict";

var thisTime = new Date();

var timeStr = thisTime.toLocaleString();

document.getElementById("timeStamp").innerHTML = timeStr;

var thisHour = thisTime.getHours();

var thisMonth = thisTime.getMonth();

var month = thisMonth;

var hour = thisHour;

var mapNum = ((2*thisMonth + thisHour) % 24);

var imgStr = "<img src='sd_sky" + mapNum + ".png' />";

document.getElementById("planisphere").insertAdjacentHTML() = imgStr;

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

When posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

If you're using workspaces, a better way to share your project would be to make a snapshot of your workspace and post the link to it here.

And please provide a link to the course page you are working with.

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

It's hard to read unformatted code, but it looks like there's some issues with the usage of "insertAdjacentHTML()" (perhaps you meant to use "innerHTML" instead?):

  • it seems to be missing the required "position" argument
  • the text should be passed as the second argument
  • it does not return anything that can be assigned to

For more details, see the MDN page.