ahora estoy aprendiendo JavaScript y, para practicar, estoy tratando de hacer un editor de texto. Donde puede escribir algo, haga clic en un botón y hágalo en mayúsculas o minúsculas, negrita y talic. Funcionó con mayúsculas y minúsculas, pero por alguna razón no funciona con negrita.
Aquí está mi 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>
Y aquí está el guión:
> 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"; > }
El texto que se cambiará será el h1, en la parte superior del HTML. Además, escribí
let valor = documento.getElementById("tipo").valor
para ahorrarme algo de tiempo, pero cuando hago clic en el botón 1 (en mayúsculas), el texto simplemente desaparece. El button2, con input.value funcionó bien. Entonces, ¿por qué var value1 hace que el texto desaparezca y por qué no puedo poner el texto en negrita?
¡Gracias!
El problema es que está cambiando el valor de input.value a negrita. No puede input.value de entrada, debe cambiar directamente el estilo de input .
Además, no puede usar input.value = no es una función integrada como toUpperCase , es estilo.
Use input.value.style.fontWeight puede funcionar, pero debe volver a aplicarlo y hacer clic en otro elemento que está desordenado. La forma más fácil es <b> para que no tenga que preocuparse por volver a cambiarlo.
Además, tengo un problema que debo mencionar, debe declarar el valor de entrada dentro de la función, lo declara al principio, que siempre estará vacío ya que asigna el valor al cargar la página.
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>necesita dar CSS al objeto, no al texto algo como esto:
input.style.fontWeight="bold";