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>