时间戳

首页 > 解决方案 > 通过 DOM 操作更改段落和跨度元素的文本值

javascript - 通过 DOM 操作更改段落和跨度元素的文本值

问题描述

我正在尝试获得与此类似的输出在此处输入图像描述

但是，单击按钮时，事件侦听器无法同时更改引用和作者。我必须注释掉一个才能看到另一个。这是HTML

<div class="quote-box">
    <p class="quote-text">The love of money is the root of all evils.
        The love of money is the root of all evils.
        <span class="author">Author</span>
    </p>
    <div class="bottom-right">
        <button class="quote-btn">CLICK ME</button>
    </div>
</div>

这是CSS

*{
    background-color: #BBB23E
}

.quote-box{
    background-color:#3E95BB;
    width:50%;
    height:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
    margin:0;
}

.quote-box{
    display:flex; 
    align-items:center;
    justify-content: center;
}

.quote-text{
    position:absolute;
    background-color:white;
    width:80%;
    height:auto;
    padding:20px;
}

.author{
    border:2px red solid;
}

.bottom-right{
    position:absolute;
    right:0.5rem;
    bottom:0.5rem; 
}

这是Javascript

function pickFromArray(choices) {
    return choices[Math.floor(Math.random() * choices.length)];
}
let btnEl = document.querySelector("button");
let quoteEl = document.querySelector("p");
let authorEl = document.querySelector("span");
console.log(quoteEl);
btnEl.addEventListener("click", () => {
    let radnomQuote = pickFromArray(quotes);
    console.log(radnomQuote);
    quoteEl.textContent = radnomQuote.quote;
    authorEl.innerHTML = radnomQuote.author;
    console.log(authorEl.textContent);
})

这是引号数组

const quotes = [
    {
        quote: "Life isn’t about getting and having, it’s about giving and being.",
        author: "Kevin Kruse",
    },
    {
        quote: "Whatever the mind of man can conceive and believe, it can achieve.",
        author: "Napoleon Hill",
    },
    {
        quote: "Strive not to be a success, but rather to be of value.",
        author: "Albert Einstein",
    }
]

我也尝试过innerHTML，但似乎没有任何效果。但是，当我从 p 标签中取出跨度并将绝对位置应用于作者类时，作者出现在白色背景之外，这不是我希望看到的。你能指出我正确的方向吗？

标签： javascripthtmlcssdom

解决方案

问题是设置quoteEl.textContent有效地删除了作者跨度。相反，设置quoteEl.firstChild.textContent

const quotes = [
  {
    quote: "Life isn’t about getting and having, it’s about giving and being.",
    author: "Kevin Kruse",
  },
  {
    quote: "Whatever the mind of man can conceive and believe, it can achieve.",
    author: "Napoleon Hill",
  },
  {
    quote: "Strive not to be a success, but rather to be of value.",
    author: "Albert Einstein",
  }]
  
function pickFromArray(choices) {
  return choices[Math.floor(Math.random() * choices.length)];
}

let btnEl = document.querySelector("button");
let quoteEl = document.querySelector("p");
let authorEl = document.querySelector("span");
//console.log(quoteEl);

btnEl.addEventListener("click", () => {
  let radnomQuote = pickFromArray(quotes);
//  console.log(radnomQuote);
  quoteEl.firstChild.textContent = radnomQuote.quote;
  authorEl.innerHTML = radnomQuote.author;
//  console.log(authorEl.textContent);
})
*{
    background-color: #BBB23E
}
.quote-box{
    background-color:#3E95BB;
    width:50%;
    height:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:absolute;
    margin:0;

}
.quote-box{
    display:flex; 
    align-items:center;
    justify-content: center;
    
}
.quote-text{
    position:absolute;
    background-color:white;
    width:80%;
    height:auto;
    padding:20px;
}
.author{
    border:2px red solid;
}
.bottom-right{
    position:absolute;
   right:0.5rem;
   bottom:0.5rem; 
}
<div class="quote-box">
          
        <p class="quote-text">The love of money is the root of all evils.
          The love of money is the root of all evils.
        <span class="author">Author</span>
        </p>
          <div class="bottom-right">
        <button class="quote-btn">CLICK ME</button>
      </div>
  </div>

推荐阅读