CODEWITHSUNDEEP
javascripthtml
LiveBacteria
LiveBacteria

Reputation: 111

Incorrect Invocation

You have an incorrect invocation of a method because you are invoking it on the wrong object.

My mentor is telling me that I'm 'invoking a method' incorrectly. I have searched the web for this, I've looked on w3schools tutorials website and their call or invoke tutorials are not relevant to what issues I'm having.

The goal of this code is to target, edit, and add a new HTML element using JS.

Javascript

    function start(){
  let targetTag = document.querySelector('#list');
  let newItem = targetTag.createElement('li');
  newItem.innerText = ("Mens T-shirt");
  targetTag.prepend(newItem);
}

HTML

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
</ul>
<input type="button" value="Add Field" onClick="start();"/>

Upvotes: 0

Views: 304

Answers (1)

Ionică Bizău
Ionică Bizău

Reputation: 113345

targetTag.createElement is wrong (it simply doesn't exist)—you should use document.createElement:

let newItem = document.createElement('li');


function start() {
  // Select the list element (using querySelector
  // you select it by its id: #list)
  let targetTag = document.querySelector('#list');
  
  // Create in memory a new <li> element
  let newItem = document.createElement('li');
  
  // Set its content (text) to be "Mens T-shirt")
  newItem.innerText = ("Mens T-shirt");
  
  // Prepend it in the list (at this point you are 
  // adding it in the DOM)
  targetTag.prepend(newItem);
}


// Let's call the function
start()
<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
</ul>

Upvotes: 3

Related Questions