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 DOM Scripting By Example Improving the Application Code Refactor 1: Create List Items

Sherrie Jeffers
seal-mask
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points
Posted by Sherrie Jeffers
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 7,909 Points

text displaying as "text" after making createElement function

https://w.trhou.se/3v6opxv62j

heres my snapshot, I have now followed the video exactly twice and right after making the createElement function my form no longer works and I get "text" in my element instead of the name from the input field. no idea why

2 Answers

Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

You are so close (I think you knew that already). Good luck with your JavaScript journey-- it's a worthwhile endeavor!

Right now you are dropping in the word 'text', rather, it should be the parameter that you pass in. All you have to do is unquote the text parameter. Like this...

function createLI(text) {
    function createElement(elementName, property, value) {
      const element = document.createElement(elementName);
      element[property] = value;
      return element;
    }

    const li = document.createElement('li');

// const span = createElement('span', 'textContent', 'text');
    const span = createElement('span', 'textContent', text);

    li.appendChild(span);

    const label = document.createElement('label');
    label.textContent = 'Confirmed';

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';

    label.appendChild(checkbox); 
    li.appendChild(label);
    const editButton = document.createElement('button');
    editButton.textContent = 'edit';
    li.appendChild(editButton);  
    const removeButton = document.createElement('button');
    removeButton.textContent = 'remove';
    li.appendChild(removeButton);
    return li;
  }
Jeff Muday
MOD
Jeff Muday
Treehouse Moderator 28,720 Points
Jeff Muday
Jeff Muday
Treehouse Moderator 28,720 Points

When a piece of text is in quotations -- "myvar" it is treated by JavaScript as a literal string.

console.log("myvar");

or

console.log('myvar');

always prints the word myvar.

When a piece of text is not in quotations it is a variable or parameter.

console.log(myvar);

it will print the value of what the programmer has put inside myvar. For example.

var myvar = "Hello";
console.log(myvar);

will print Hello

You can also see this hint by the syntax coloring (if you aren't colorblind). You notice that a literal string is colored ORANGE and a variable is colored PINK-- this will change depending on your editor but here it is apparent.

In your case, the parameter text was being treated as a literal when it was in quotations 'text' and was being sent to the element. What you wanted was the value of the parameter or variable called text

I hope this makes sense-- but you will catch on and it will become second nature to you!