使用DOM事件使文本變為粗體

我現在正在學習 JavaScript，為了練習，我正在嘗試制作一個文本編輯器。在您可以輸入內容的地方，單擊一個按鈕并將其設定為大寫或小寫、粗體和斜體。它適用于小寫和大寫，但由于某種原因它不適用于粗體。

這是我的 HTML：

<h1 id="text">Escreva seu texto abaixo</h1>

<div id="container">
    <input type="text" id="type">
</div>
<main>
    <ul>
        <li class="buttons">
            <button id="button1">A</button>
        </li>
        <li class="buttons">
            <button id="button2">a</button>
        </li>
        <li class="buttons">
            <button id="button3">B</button>
        </li>
        <li class="buttons">
            <button id="button4">I</button>
        </li>
    </ul>
</main>

這是腳本：

>  let text = document.getElementById("text")
>         let input = document.getElementById("type")
>         let button1 = document.getElementById("button1")
>         let button2 = document.getElementById("button2")
>         let button3 = document.getElementById("button3")
>         let button4 = document.getElementById("button4")
>         let value1 = document.getElementById("type").value
> 
> 
>         button1.onclick = uppercase
>         button2.onclick = lowercase
>         button3.onclick = bold
>         button4.onclick = italic
> 
>         function uppercase(){
>             text.innerHTML = value1.toUpperCase()
>         }
> 
>         function lowercase (){
>             text.innerText = input.value.toLowerCase()
>         }
> 
>         function bold(){
>             text.innerText = input.value.style.fontWeight="bold";
>         }

將要更改的文本將是 HTML 頂部的 h1。另外，我寫了

讓值 = document.getElementById("type").value

為了節省我一些時間，但是當我單擊 button1（大寫）時，文本就消失了。帶有 input.value 的 button2 作業正常。那么為什么 var value1 使文本消失，為什么我不能使文本變為粗體？

謝謝！`

uj5u.com熱心網友回復：

問題是您將其更改input.value為粗體。您無法設定樣式，input.value您應該直接更改input樣式。

另外，你不能使用input.value =它不是內置函式toUpperCase，它是樣式。

使用input.value.style.fontWeight可能會起作用，但是您需要將其應用回來，單擊其他雜亂的元素。最簡單的方法是<b>這樣您就不必擔心將其更改回來。

另外，我必須提到的問題是，您應該在函式內宣告輸入值，在開始時宣告它，因為您在頁面加載時分配值，所以它始終是未定義的。

let text = document.getElementById("text")
let input = document.getElementById("type")
let button1 = document.getElementById("button1")
let button2 = document.getElementById("button2")
let button3 = document.getElementById("button3")
let button4 = document.getElementById("button4")


button1.onclick = uppercase
button2.onclick = lowercase
button3.onclick = bold
//button4.onclick = italic

function uppercase() {
let value1 = document.getElementById("type").value
  text.innerHTML = value1.toUpperCase()
}

function lowercase() {
  text.innerText = input.value.toLowerCase()
}

function bold() {
  text.innerHTML = '<b>' input.value '</b>'
}

<h1 id="text">Escreva seu texto abaixo</h1>

<div id="container">
  <input type="text" id="type">
</div>
<main>
  <ul>
    <li class="buttons">
      <button id="button1">A</button>
    </li>
    <li class="buttons">
      <button id="button2">a</button>
    </li>
    <li class="buttons">
      <button id="button3">B</button>
    </li>
    <li class="buttons">
      <button id="button4">I</button>
    </li>
  </ul>
</main>

uj5u.com熱心網友回復：

您需要將 CSS 賦予物件，而不是像這樣的文本：

input.style.fontWeight="bold";

標籤：

上一篇：如何從用戶在前端提交的PNG讀取單個像素透明度值？

下一篇：CSS：可見性和不透明度的結合