JavaScript 如何通过单击事件侦听器方法将新引号示例添加到对象现有数组中

Question

各位！这是我第一次post来这里，所以我会尽我最大的努力正确提问并揭露我的疑惑和我到目前为止所做的尝试。

我一直在尝试创建一个引号生成器，还有一些功能。

我已经将7个引号示例作为对象放入数组中并留有3个“空闲空间”，从ID 8到10计数用户可以通过“添加新引号按钮”添加更多引号示例

正如我在JS文件的最后一部分，但我不知道我做错了什么。

所以，如果你们能帮帮我，我很感激！

PS。对象数组的 ID 键值这是一个强制值。

提前致谢！

let quotes = [
    {
        id: 0,
        author: "Nelson Mandela",
        quote: "The greatest glory in living lies not in never falling, but in rising every time we fall."
    },
    {
        id: 1,
        author: "Walt Disney",
        quote: "The way to get started is to quit talking and begin doing."
      },
      {
        id: 2,
        author: "Steve Jobs",
        quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking."
      },
      {
        id: 3,
        author: "Eleanor Roosevelt",
        quote: "If life were predictable it would cease to be life, and be without flavor."
      },
      {
        id: 4,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 5,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 6,
        author: "James Cameron",
        quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success."
      },
      {
        id: 7,
        author: "John Lennon",
        quote: "Life is what happens when you're busy making other plans."
      },
      {
        id: 8,
        author: "",
        quote: ""
      },
      {
        id: 9,
        author: "",
        quote: ""
      },
      {
        id: 10,
        author: "",
        quote: ""
      },
  ];

//Var to select the "generate quote" button
var btnQuotes = document.getElementById('new-quote');
// console.log(btnQuotes)

//Var to select the "quote message display"
var quoteDisplay = document.getElementById('quote')
// console.log(quoteDisplay)

//Var to select the "author message display"
var authorDisplay = document.getElementById('author')
// console.log(authorDisplay)

//Var to select the "Add quotes button"
var addNewQuotes = document.getElementById('add-quotes-button')
// console.log(addNewQuotes)



//function to display the content of the array "quotes", after click
//in the "generate quote button"
btnQuotes.addEventListener('click', () => {
    let random = Math.floor(Math.random() * quotes.length);
    // console.log(random);
    quoteDisplay.innerText = quotes[random].quote
    authorDisplay.innerText = quotes[random].author;
}) 

// addNewQuotes.addEventListener('click', function (){
//   authorInput = document.getElementById('addauthor').value;
//   // console.log(authorInput);
//   quotesInput = document.getElementById('addquote').value;
//   // console.log(quotesInput);
//   quotes.push(authorInput)
// })

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #fdfdfd;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.09' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-container {
    width: auto;
    max-width: 1250px;
    margin-top: 35px;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.quote-text {
    font-size: 2.90rem;
}

.long-quote {
    font-size: 2rem;
}

.fa-quote-left {
    font-size: 4rem
}

/* .quote-author {
    margin-top: 15px;
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
} */

#author {
  font-style: italic;
  font-weight: 300;  
}


.button-container {
    margin: 15px;
    display: flex;
    justify-content: space-between;
}

input {
    font-size: 18px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid rgb(170, 169, 169);
    text-align: center;
    height: 32px; 
    outline: none;
}

b {
    font-size: 20px;
    margin: 0 10px;
}

button {
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 12px;
    color: white;
    background-color: rgb(75, 86, 240);
    outline: none;
    padding: 0.5rem 2rem;
    box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
}

button:hover {
    background-color: rgb(35, 50, 255);
}

button:active {
    transform: translate(0, 0.3rem);
    box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
}


/* Media Query: Tablet or Smaller devices */
@media screen and (max-width: 1000px) {
    .quote-container {
        margin: auto 20px;
    }

    .quote-text {
        font-size: 2.5rem;
    }

    #form-container {
        margin: auto 20px;
    }

    #new-quotes-container button {
        font-size: 1.5rem;
        margin: 30px 20px;
    }

    b {
        font-size: 20px;
        margin: 0 40px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>Mini Project - Quotes generator</title>
</head>
<body>
    <div id="form-container">
        <form onsubmit="return false">
            <div id="new-quotes-container">
              <label for="author"><b>Author:</b></label>
              <input type="text" placeholder="Add new author here" name="addauthor" id="addauthor" required>
          
              <label for="quote"><b>Quote:</b></label>
              <input type="text" placeholder="Add new quote here" name="addquote" id="addquote" required>
              
              <button type="submit" id="add-quotes-button">Register new quote</button>
            </div>
          </form>

    <section class="quote-container" id="quote-container">
        <!-- Quotes here-->
        <div class="quote-text">
            <i class="fas fa-quote-left"></i>
            <span id="quote">Generate your quote pressing the button bellow!</span>
            <span id="author">Author's name</span>
        </div>

        <!-- Author -->
        <!-- <div class="quote-author">
            <span id="author">Buddha</span>
        </div> -->

        <!-- Buttons -->
        <div class="button-container">
            <button class="like-button" id="like" tittle="Like this quote!">
                <i class="far fa-thumbs-up"></i>
            </button>
            <button id="new-quote">Generate quote</button>
        </div>
    </section>        


    <!-- Script -->
    <script = src="script.js" ></script>
</body>
</html>

Answer 1

let quotes = [
    {
        id: 0,
        author: "Nelson Mandela",
        quote: "The greatest glory in living lies not in never falling, but in rising every time we fall."
    },
    {
        id: 1,
        author: "Walt Disney",
        quote: "The way to get started is to quit talking and begin doing."
      },
      {
        id: 2,
        author: "Steve Jobs",
        quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking."
      },
      {
        id: 3,
        author: "Eleanor Roosevelt",
        quote: "If life were predictable it would cease to be life, and be without flavor."
      },
      {
        id: 4,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 5,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 6,
        author: "James Cameron",
        quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success."
      },
      {
        id: 7,
        author: "John Lennon",
        quote: "Life is what happens when you're busy making other plans."
      },
      {
        id: 8,
        author: "",
        quote: ""
      },
      {
        id: 9,
        author: "",
        quote: ""
      },
      {
        id: 10,
        author: "",
        quote: ""
      },
  ];

//Var to select the "generate quote" button
var btnQuotes = document.getElementById('new-quote');
// console.log(btnQuotes)

//Var to select the "quote message display"
var quoteDisplay = document.getElementById('quote')
// console.log(quoteDisplay)

//Var to select the "author message display"
var authorDisplay = document.getElementById('author')
// console.log(authorDisplay)

//Var to select the "Add quotes button"
var addNewQuotes = document.getElementById('add-quotes-button')
// console.log(addNewQuotes)



//function to display the content of the array "quotes", after click
//in the "generate quote button"
btnQuotes.addEventListener('click', () => {
    let random = Math.floor(Math.random() * quotes.length);
    // console.log(random);
    quoteDisplay.innerText = quotes[random].quote
    authorDisplay.innerText = quotes[random].author;
}) 

addNewQuotes.addEventListener('click', function (){
    const nextEmptyQuote = quotes.find(({ author, quote }) => !author && !quote);
    if (!nextEmptyQuote) return alert('you cannot add any quotes any more')
    nextEmptyQuote.quote = document.getElementById('addquote').value;
   nextEmptyQuote.author = document.getElementById('addauthor').value;

})

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #fdfdfd;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.09' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
    color: black;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-container {
    width: auto;
    max-width: 1250px;
    margin-top: 35px;
    padding: 20px 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.quote-text {
    font-size: 2.90rem;
}

.long-quote {
    font-size: 2rem;
}

.fa-quote-left {
    font-size: 4rem
}

/* .quote-author {
    margin-top: 15px;
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
} */

#author {
  font-style: italic;
  font-weight: 300;  
}


.button-container {
    margin: 15px;
    display: flex;
    justify-content: space-between;
}

input {
    font-size: 18px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid rgb(170, 169, 169);
    text-align: center;
    height: 32px; 
    outline: none;
}

b {
    font-size: 20px;
    margin: 0 10px;
}

button {
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 12px;
    color: white;
    background-color: rgb(75, 86, 240);
    outline: none;
    padding: 0.5rem 2rem;
    box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
}

button:hover {
    background-color: rgb(35, 50, 255);
}

button:active {
    transform: translate(0, 0.3rem);
    box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
}


/* Media Query: Tablet or Smaller devices */
@media screen and (max-width: 1000px) {
    .quote-container {
        margin: auto 20px;
    }

    .quote-text {
        font-size: 2.5rem;
    }

    #form-container {
        margin: auto 20px;
    }

    #new-quotes-container button {
        font-size: 1.5rem;
        margin: 30px 20px;
    }

    b {
        font-size: 20px;
        margin: 0 40px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <title>Mini Project - Quotes generator</title>
</head>
<body>
    <div id="form-container">
        <form onsubmit="return false">
            <div id="new-quotes-container">
              <label for="author"><b>Author:</b></label>
              <input type="text" placeholder="Add new author here" name="addauthor" id="addauthor" required>
          
              <label for="quote"><b>Quote:</b></label>
              <input type="text" placeholder="Add new quote here" name="addquote" id="addquote" required>
              
              <button type="submit" id="add-quotes-button">Register new quote</button>
            </div>
          </form>

    <section class="quote-container" id="quote-container">
        <!-- Quotes here-->
        <div class="quote-text">
            <i class="fas fa-quote-left"></i>
            <span id="quote">Generate your quote pressing the button bellow!</span>
            <span id="author">Author's name</span>
        </div>

        <!-- Author -->
        <!-- <div class="quote-author">
            <span id="author">Buddha</span>
        </div> -->

        <!-- Buttons -->
        <div class="button-container">
            <button class="like-button" id="like" tittle="Like this quote!">
                <i class="far fa-thumbs-up"></i>
            </button>
            <button id="new-quote">Generate quote</button>
        </div>
    </section>        


    <!-- Script -->
    <script = src="script.js" ></script>
</body>
</html>

Answer 2

我认为你做对了大部分，只需要将 object 添加到 quotes 数组。我认为您在破坏代码的 array 中添加了 string。请考虑以下代码片段以供参考。

const quotes = [
    {
        id: 0,
        author: "Nelson Mandela",
        quote: "The greatest glory in living lies not in never falling, but in rising every time we fall."
    },
    {
        id: 1,
        author: "Walt Disney",
        quote: "The way to get started is to quit talking and begin doing."
      },
      {
        id: 2,
        author: "Steve Jobs",
        quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking."
      },
      {
        id: 3,
        author: "Eleanor Roosevelt",
        quote: "If life were predictable it would cease to be life, and be without flavor."
      },
      {
        id: 4,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 5,
        author: "Oprah Winfrey",
        quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough."
      },
      {
        id: 6,
        author: "James Cameron",
        quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success."
      },
      {
        id: 7,
        author: "John Lennon",
        quote: "Life is what happens when you're busy making other plans."
      }
  ];

//Var to select the "generate quote" button
const btnQuotes = document.getElementById('new-quote');
// console.log(btnQuotes)

//Var to select the "quote message display"
const quoteDisplay = document.getElementById('quote')
// console.log(quoteDisplay)

//Var to select the "author message display"
const authorDisplay = document.getElementById('author')
// console.log(authorDisplay)

//Var to select the "Add quotes button"
const addNewQuotes = document.getElementById('add-quotes-button')
// console.log(addNewQuotes)



//function to display the content of the array "quotes", after click
//in the "generate quote button"
btnQuotes.addEventListener('click', () => {
    let random = Math.floor(Math.random() * quotes.length);
    // console.log(random);
    quoteDisplay.innerText = quotes[random].quote
    authorDisplay.innerText = quotes[random].author;
}) 

// to test this, you can set quotes as an empty array and add a quote and see it work
addNewQuotes.addEventListener('click', function (){
  let author = document.getElementById('addauthor').value;
  let quote = document.getElementById('addquote').value;
  // you can add any validations - like both items should be non empty before you push
  quotes.push({
    id: quotes.length,
    author,
    quote
  });
  console.log(quotes);
})

我还在 - Codepen for Quote generator 托管了代码笔，如果你想验证

JavaScript 如何通过单击事件侦听器方法将新引号示例添加到对象现有数组中

How to add new quotes examples into an object existing array, through click event listener method, in JavaScript

html

javascript

css

addeventlistener