I am trying to use .replaceChild to replace an ordered list item with the value of a prompt-CodePudding

In my program it lists three items in an ordered list which all have ids. Then when you click a button it prompts you to enter the number corresponding to which numbered item on the list you want to replace. Then another prompt asks what you want to replace the text on the screen with. I have if statements set up to check for which number is entered and using .replaceChild to replace text in the list with the text entered in the prompt. I assumed this would work similar to how using .innerHTML does in replacing text, but it is not working for me. Any help would be appreciated.

Here is my code.

function replaceItem() 
{ 
var listNum = prompt("Which item are you replaceing 1, 2 or 3?");
var newItem = prompt("What is the name of the new item?");

if (listNum === 1) {
var item_one = document.getElementbyId("item1");
item_one.replaceChild(newItem, item_one);
}

if (listNum === 2) {
var item_two = document.getElementbyId("item2");
item_two.replaceChild(newItem, item_two);
}

if (listNum === 3) {
var item_three = document.getElementbyId("item3");
item_three.replaceChild(newItem, item_three);
}

}

HTML.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Island Scenario</title>
</head>

<body>
<h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
<h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
<h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
<h4>Here are your current items.</h4>
<ul>
<li id="item1">Water Bottle</li>
<li id="item2">Lighter</li>
<li id="item3">Backpack</li>
</ul>
<p>Click the button to replace an item.</p>
<button onclick="replaceItem();">Click Me</button>
</body>
</html>

CodePudding user response：

In addition to the typo in your attempt, this isn't the way to use replaceChild. With replaceChild, you need to specify which HTML node element to replace, along with the new element to replace with. Here's an easier way. Just use the natural index of the elements and innerText to replace the one you want. I gave the UL a className to make this a better example.

In this line, document.querySelectorAll('.theList li') makes an iterable HTMLElement list and [listNum - 1] takes the input, subtracts one to get the correct LI element.

document.querySelectorAll('.theList li')[listNum - 1].innerText = newItem;

function replaceItem() {
  var listNum = prompt("Which item are you replaceing 1, 2 or 3?");
  var newItem = prompt("What is the name of the new item?");
  document.querySelectorAll('.theList li')[listNum - 1].innerText = newItem;
  return
}

<h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
<h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
<h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
<h4>Here are your current items.</h4>
<ul class='theList'>
  <li id="item1">Water Bottle</li>
  <li id="item2">Lighter</li>
  <li id="item3">Backpack</li>
</ul>
<p>Click the button to replace an item.</p>
<button onclick="replaceItem();">Click Me</button>

CodePudding user response：

The replaceChild is not the best way to handle this scenario, since replace the innerText or textContent of the Node would be more straightforward, but if you want to know why it's not working, that is because replaceChild wants two HTML nodes as params, newNode and oldNode, since you have text nodes inside the li elements, you need to get them with childNodes property, same goes for the newNode you need to create a textNode with document.createTextNode.

Other than this, I suggest you to make a function to handle that logic to follow DRY principles, since you are repeating the only thing that changes is the selector of the parent:

function replaceItem() {
  const listNum = prompt("Which item are you replaceing 1, 2 or 3?");
  const newItem = document.createTextNode(prompt("What is the name of the new item?"))
  replace(listNum, newItem)
}

function replace(n, newNode) {
  const parent = document.getElementById(`item${n}`);
  const oldNode = parent.childNodes[0]
  parent.replaceChild(newNode, oldNode);
}

<body>
  <h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
  <h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
  <h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
  <h4>Here are your current items.</h4>
  <ul>
    <li id="item1">
      Water Bottle
    </li>
    <li id="item2">
      Lighter
    </li>
    <li id="item3">
      Backpack
    </li>
  </ul>
  <p>Click the button to replace an item.</p>
  <button onclick="replaceItem();">Click Me</button>