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

Question

我現在正在學習 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"; > }

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

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

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

謝謝！`

Answer 1

問題是您將input.value更改為粗體。 您不能設置input.value的樣式，您應該直接更改input樣式。

此外，您不能使用input.value =它不像toUpperCase那樣內置 function ，它是風格。

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

另外，我必須提到的問題是，您應該在 function 中聲明輸入值，您在開始時聲明它始終為空，因為您在頁面加載時分配了值。

 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>' }

 <p id="text">Escreva seu texto abaixo</p> <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>

Answer 2

您需要將 CSS 提供給 object，而不是像這樣的文本：

input.style.fontWeight="bold";