我无法通过用户输入在JavaScript中更改对象的值。

huangapple go评论77阅读模式
英文:

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

问题

我理解了,你想要翻译的代码部分如下:

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>

希望这对你有所帮助!如果你有任何其他问题,请随时告诉我。

英文:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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(&quot;addBttn&quot;).addEventListener(&quot;click&quot;, function(event) {
event.preventDefault();
let userTitle = document.getElementById(&quot;title&quot;).value;
let userAuthor = document.getElementById(&quot;author&quot;).value;
let userGenre = document.getElementById(&quot;genre&quot;).value;
let userReview = document.getElementById(&quot;reviews&quot;).value;
const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
myArray.push(newObj)
sessionStorage.setItem(&quot;array&quot;, JSON.stringify(myArray));
document.getElementById(&quot;display&quot;).innerHTML = sessionStorage.getItem(&quot;array&quot;)
})
document.getElementById(&quot;editBtn&quot;).addEventListener(&quot;click&quot;, 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 &lt; myArray.length; i++) {
let userInput2 = prompt(&quot;What aspect of the book would you like to change?\nTitle\nAuthor\nGenre\nReview&quot;);
let toLower = userInput2.toLowerCase();
if (toLower === &quot;title&quot;) {
console.log(myArray)
let userInput3 = prompt(&quot;What would you like the title to be?&quot;);
let result = myArray[index].getTitle().replace(myArray[index].getTitle(), userInput3);
console.log(result)
console.log(myArray)
return
}
}
})

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;booksCSS.css&quot;&gt;
&lt;title&gt;Book Catalogue&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Your favourite book catalogue&lt;/h1&gt;
&lt;form onsubmit=&quot;false&quot;&gt;
&lt;label for=&quot;title&quot;&gt;Please enter the title of your book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;title&quot; id=&quot;title&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;author&quot;&gt;Please enter the author of the book&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;author&quot; id=&quot;author&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;genre&quot;&gt;Please enter the genre of the book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;genre&quot; id=&quot;genre&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;reviews&quot;&gt;Please enter your review on the book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;reviews&quot; id=&quot;reviews&quot; required&gt;
&lt;button id=&quot;addBttn&quot; type=&quot;button&quot;&gt;Add&lt;/button&gt;
&lt;/form&gt;
&lt;p id=&quot;display&quot;&gt;&lt;/p&gt;&lt;br/&gt;
&lt;button id=&quot;editBtn&quot; type=&quot;button&quot;&gt;edit&lt;/button&gt;
&lt;script src=&quot;booksJS.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

你没有将用户输入赋值给Title属性。replace()不会原地修改字符串。

另外,你不需要使用for循环。

英文:

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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(&quot;addBttn&quot;).addEventListener(&quot;click&quot;, function(event) {
event.preventDefault();
let userTitle = document.getElementById(&quot;title&quot;).value;
let userAuthor = document.getElementById(&quot;author&quot;).value;
let userGenre = document.getElementById(&quot;genre&quot;).value;
let userReview = document.getElementById(&quot;reviews&quot;).value;
const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
myArray.push(newObj)
//sessionStorage.setItem(&quot;array&quot;, JSON.stringify(myArray));
document.getElementById(&quot;display&quot;).innerHTML = JSON.stringify(myArray);
})
document.getElementById(&quot;editBtn&quot;).addEventListener(&quot;click&quot;, 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(&quot;What aspect of the book would you like to change?\nTitle\nAuthor\nGenre\nReview&quot;);
let toLower = userInput2.toLowerCase();
if (toLower === &quot;title&quot;) {
console.log(myArray)
let userInput3 = prompt(&quot;What would you like the title to be?&quot;);
myArray[index].Title = userInput3;
console.log(myArray)
return
}
})

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;booksCSS.css&quot;&gt;
&lt;title&gt;Book Catalogue&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Your favourite book catalogue&lt;/h1&gt;
&lt;form onsubmit=&quot;false&quot;&gt;
&lt;label for=&quot;title&quot;&gt;Please enter the title of your book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;title&quot; id=&quot;title&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;author&quot;&gt;Please enter the author of the book&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;author&quot; id=&quot;author&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;genre&quot;&gt;Please enter the genre of the book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;genre&quot; id=&quot;genre&quot; required&gt;&lt;br/&gt;
&lt;label for=&quot;reviews&quot;&gt;Please enter your review on the book:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;reviews&quot; id=&quot;reviews&quot; required&gt;
&lt;button id=&quot;addBttn&quot; type=&quot;button&quot;&gt;Add&lt;/button&gt;
&lt;/form&gt;
&lt;p id=&quot;display&quot;&gt;&lt;/p&gt;&lt;br/&gt;
&lt;button id=&quot;editBtn&quot; type=&quot;button&quot;&gt;edit&lt;/button&gt;
&lt;script src=&quot;booksJS.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月27日 17:20:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76563410.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定