I cant get my object to change its value with a user input in javascript

I am making a program which allows the user to create a book catalogue and then displays the catalogue on the webpage. The user can also edit their created items by pressing the edit button at the bottom which then starts a series of prompts. I have only started with the one prompt to change the title, however when I try to replace the original title with the user's edited title, it doesn't change the title in the array.

let myArray = [];
class Books {
  constructor(Title, Author, Genre, Review) {
    this.Title = Title
    this.Author = Author
    this.Genre = Genre
    this.Review = Review
  }

  getTitle() {
    return this.Title
  }
  getAuthor() {
    return this.Author
  }
  getGenre() {
    return this.Genre
  }
  getReview() {
    return this.Review
  }
}

document.getElementById("addBttn").addEventListener("click", function(event) {
  event.preventDefault();

  let userTitle = document.getElementById("title").value;
  let userAuthor = document.getElementById("author").value;
  let userGenre = document.getElementById("genre").value;
  let userReview = document.getElementById("reviews").value;

  const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
  myArray.push(newObj)
  sessionStorage.setItem("array", JSON.stringify(myArray));
  document.getElementById("display").innerHTML = sessionStorage.getItem("array")
})

document.getElementById("editBtn").addEventListener("click", function(event) {
  let userInput = Number(prompt(`Which item would you like to edit? Please choose from 
    item 1 to ${myArray.length}`));
  let index = userInput - 1
  for (let i = 0; i < myArray.length; i++) {
    let userInput2 = prompt("What aspect of the book would you like to change?\nTitle\nAuthor\nGenre\nReview");
    let toLower = userInput2.toLowerCase();
    if (toLower === "title") {
      console.log(myArray)
      let userInput3 = prompt("What would you like the title to be?");
      let result = myArray[index].getTitle().replace(myArray[index].getTitle(), userInput3);
      console.log(result)
      console.log(myArray)
      return
    }
  }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="booksCSS.css">
  <title>Book Catalogue</title>
</head>

<body>
  <h1>Your favourite book catalogue</h1>
  <form onsubmit="false">
    <label for="title">Please enter the title of your book:</label>
    <input type="text" name="title" id="title" required><br/>

    <label for="author">Please enter the author of the book</label>
    <input type="text" name="author" id="author" required><br/>

    <label for="genre">Please enter the genre of the book:</label>
    <input type="text" name="genre" id="genre" required><br/>

    <label for="reviews">Please enter your review on the book:</label>
    <input type="text" name="reviews" id="reviews" required>

    <button id="addBttn" type="button">Add</button>
  </form>
  <p id="display"></p><br/>

  <button id="editBtn" type="button">edit</button>


  <script src="booksJS.js"></script>

</body>

</html>

Solution

You're not assigning the user input to the Title property. replace() doesn't modify the string in place.

Also, you don't need the for loop.

let myArray = [];
class Books {
  constructor(Title, Author, Genre, Review) {
    this.Title = Title
    this.Author = Author
    this.Genre = Genre
    this.Review = Review
  }

  getTitle() {
    return this.Title
  }
  getAuthor() {
    return this.Author
  }
  getGenre() {
    return this.Genre
  }
  getReview() {
    return this.Review
  }
}

document.getElementById("addBttn").addEventListener("click", function(event) {
  event.preventDefault();

  let userTitle = document.getElementById("title").value;
  let userAuthor = document.getElementById("author").value;
  let userGenre = document.getElementById("genre").value;
  let userReview = document.getElementById("reviews").value;

  const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
  myArray.push(newObj)
  //sessionStorage.setItem("array", JSON.stringify(myArray));
  document.getElementById("display").innerHTML = JSON.stringify(myArray);
})

document.getElementById("editBtn").addEventListener("click", function(event) {
  let userInput = Number(prompt(`Which item would you like to edit? Please choose from 
    item 1 to ${myArray.length}`));
  let index = userInput - 1
    let userInput2 = prompt("What aspect of the book would you like to change?\nTitle\nAuthor\nGenre\nReview");
    let toLower = userInput2.toLowerCase();
    if (toLower === "title") {
      console.log(myArray)
      let userInput3 = prompt("What would you like the title to be?");
      myArray[index].Title = userInput3;
      console.log(myArray)
      return
    }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="booksCSS.css">
  <title>Book Catalogue</title>
</head>

<body>
  <h1>Your favourite book catalogue</h1>
  <form onsubmit="false">
    <label for="title">Please enter the title of your book:</label>
    <input type="text" name="title" id="title" required><br/>

    <label for="author">Please enter the author of the book</label>
    <input type="text" name="author" id="author" required><br/>

    <label for="genre">Please enter the genre of the book:</label>
    <input type="text" name="genre" id="genre" required><br/>

    <label for="reviews">Please enter your review on the book:</label>
    <input type="text" name="reviews" id="reviews" required>

    <button id="addBttn" type="button">Add</button>
  </form>
  <p id="display"></p><br/>

  <button id="editBtn" type="button">edit</button>


  <script src="booksJS.js"></script>

</body>

</html>