使用 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";