在哪里添加用于切换按钮文本的代码？

Question

I want to change the text of my buttons when clicked on.我想在单击时更改按钮的文本。 The icon changes when you click the button.单击按钮时图标会发生变化。 Now I need to change the text from "Add to list" to "Added to list".现在我需要将文本从“添加到列表”更改为“添加到列表”。 I tried to add a code for the this, but I don't really understand how where to put this.我试图为此添加代码，但我真的不明白如何将它放在哪里。 Should this be in the first function?这应该在第一个 function 中吗？ Sorry if I sound a little vague but hope someone can help me.对不起，如果我听起来有点含糊，但希望有人可以帮助我。

 function toggle(index) { const icon = document.querySelectorAll("button i")[index]; icon.classList.toggle("far"); icon.classList.toggle("fas"); } function changeText() { var text = document.querySelectorAll("button"); if (text.innerHTML == "Add to list") { text.innerHTML = "Added to list"; } else { text.innerHTML = "Add to list"; } } document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function () { toggle(index); }));

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; }.title { text-align: center; padding: 1.8rem; font-size: 2rem; color: black; font-family: 'Lexend Mega', sans-serif; }.populair-movies { justify-content: center; display: flex; }.populair-movies h3 { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 1.2rem; padding-top: 0.2rem; padding-bottom: 0.7rem; }.populair-movies p { font-family: 'Open Sans', sans-serif; font-weight: 100; }.stars { padding-bottom: 0.3rem; }.populair-movies.card-container.card { height: 300px; width: 200px; margin: 0.5rem; }.populair-movies.card-container.card img { height: 100%; width: 100%; }.styling-btn { margin-top: 1rem; padding: 0.5rem 1.1rem 0.5rem 0.5rem; background: blue; font-size: 1rem; font-family: 'Open Sans', sans-serif; border: none; color: #e8efff; outline: none; border-radius: 5px; cursor: pointer; }.styling-btn i { margin-right: 0.7rem; margin-left: 0.3rem; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Populair Movies</title> <.-- font awesome cdn link --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css"> <.-- css file --> <link href="css/style.css" rel="stylesheet"> </head> <body> <h2 class="title">POPULAIR MOVIES</h2> <section class="populair-movies"> <div class="card-container"> <div class="card"> <img src="https.//www,moviemeter:nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky"> <div class="info"> <h3>The Midnight Sky</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 5.6 </p> </div> <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> <div class="card-container"> <div class="card"> <img src="https.//m.media-amazon,com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@:_V1_.jpg" alt="Escape from Pretoria"> <div class="info"> <h3>Escape from Pretoria</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 6.8 </p> </div> <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m </p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> <div class="card-container"> <div class="card"> <img src="https.//m.media-amazon,com/images/M/MV5BMWU0MzQwNjMtZGRiMC00M2UzLWE1YmItMWU3M2E0NmNkMDQ2XkEyXkFqcGdeQXVyNjEwNTM2Mzc@:_V1_.jpg" alt="Kadaver"> <div class="info"> <h3>Kadaver</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 5.1 </p> </div> <p>2020 ‧ Drama/Horror ‧ 1 u 26 m </p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> <div class="card-container"> <div class="card"> <img src="https.//m.media-amazon,com/images/M/MV5BY2RmZmI0NDMtMGQzOC00YWU3LTkwYWUtMDRkNDBjZDg3YTkyXkEyXkFqcGdeQXVyMTEyMjM2NDc2._V1_.jpg" alt="The Dig"> <div class="info"> <h3>The Dig</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 7,2 </p> </div> <p>2021 ‧ Drama/Geschiedenis ‧ 1 u 52 m </p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> </section> <script src="js/script.js"></script> </body> </html>

Answer 1

You have your button reference from querySelectorAll, and by clicking on it you can change inner text and value (to check for equality later).您有来自 querySelectorAll 的按钮引用，通过单击它可以更改内部文本和值（以便稍后检查是否相等）。

 function changeText(btn) { if (btn.value === 'Add to list' || btn.value === '') { btn.value = 'Added to list'; btn.innerHTML = '<i class="fas fa-heart"></i>Added to list'; } else { btn.value = 'Add to list'; btn.innerHTML = '<i class="far fa-heart"></i>Add to list'; } } document.querySelectorAll('button').forEach((btn, index) => btn.addEventListener('click', function () { changeText(btn); }));

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lexend+Mega&family=Open+Sans:wght@300;400;600;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; }.title { text-align: center; padding: 1.8rem; font-size: 2rem; color: black; font-family: 'Lexend Mega', sans-serif; }.populair-movies { justify-content: center; display: flex; }.populair-movies h3 { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 1.2rem; padding-top: 0.2rem; padding-bottom: 0.7rem; }.populair-movies p { font-family: 'Open Sans', sans-serif; font-weight: 100; }.stars { padding-bottom: 0.3rem; }.populair-movies.card-container.card { height: 300px; width: 200px; margin: 0.5rem; }.populair-movies.card-container.card img { height: 100%; width: 100%; }.styling-btn { margin-top: 1rem; padding: 0.5rem 1.1rem 0.5rem 0.5rem; background: blue; font-size: 1rem; font-family: 'Open Sans', sans-serif; border: none; color: #e8efff; outline: none; border-radius: 5px; cursor: pointer; }.styling-btn i { margin-right: 0.7rem; margin-left: 0.3rem; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Populair Movies</title> <.-- font awesome cdn link --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css"> <.-- css file --> <link href="css/style.css" rel="stylesheet"> </head> <body> <h2 class="title">POPULAIR MOVIES</h2> <section class="populair-movies"> <div class="card-container"> <div class="card"> <img src="https.//www,moviemeter:nl/images/cover/1133000/1133282.jpg" alt="The Midnight Sky"> <div class="info"> <h3>The Midnight Sky</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 5.6 </p> </div> <p>2020 ‧ Sci-fi/Drama ‧ 2 u 2 m</p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> <div class="card-container"> <div class="card"> <img src="https.//m.media-amazon,com/images/M/MV5BOWRhYWFkMDEtNTFjZC00OWJkLWJmMWQtNzI2OWRjZjVjOGYyXkEyXkFqcGdeQXVyMzQwMTY2Nzk@._V1_.jpg" alt="Escape from Pretoria"> <div class="info"> <h3>Escape from Pretoria</h3> <div class="stars"> <p> <i class="fas fa-star"></i> 6,8 </p> </div> <p>2020 ‧ Drama/Thriller ‧ 1 u 46 m </p> <button class="styling-btn"><i class="far fa-heart"></i>Add to list</button> </div> </div> </div> <div class="card-container">

在哪里添加用于切换按钮文本的代码？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-17 11:08:04

在哪里添加用于切换按钮文本的代码？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-17 11:08:04

解决方案1
1 已采纳 2021-02-17 11:08:04