0
169
ViewsEditor de vinilo/texto editable usando Javascript
Hola, ya que estoy encontrando formas de crear un vinilo editable o un editor de texto, no puedo hacerlo funcionar, quiero un resultado similar a este enlace https://www.stickermule.com/products/vinyl-lettering , hice uno pero con botones y funcionó, pero quiero aplicarlo a través del cuadro combinado, pero no funcionaría, ¿alguien puede ayudarme? Estoy usando HTML CSS y JavaScript.
Aquí está el código que he probado
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } p { width: 40%; border: 1px solid black; padding: 10px; font-weight: bold; font-size: 18px; } button { padding: 10px 20px; margin: 5px; } </style> </head> <body> <div class="container"> Select Color: <select> <option>Choose a Color</option> <option id="btnRed">Red</option> <option id="btnBlue">Blue</option> <option id="btnGreen">Green</option> </select> <textarea style="width: 25%; height: 200px;"></textarea> </div> <script> let btnRed = document.querySelector('#btnRed'); let btnBlue = document.querySelector('#btnBlue'); let btnGreen = document.querySelector('#btnGreen'); let content = document.querySelector('textarea'); btnRed.addEventListener('click',() => content.style.color = 'red'); btnBlue.addEventListener('click',() => content.style.color = 'blue'); btnGreen.addEventListener('click',() => content.style.color = 'green'); </script> </body> </html>2 answers
Answer question0
Desarrollé esta solución usando jQuery por simplicidad. Cuando se activa el evento de cambio del elemento <select> , el valor de los elementos <option> se asigna al elemento <textarea> cuyo atributo id es resultTextArea .
$( ".target" ).change(function() { $('#resultTextArea').css('color', this.value); }); .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> Select Color: <select class="target"> <option>Choose a Color</option> <option id="btnRed" value="red">Red</option> <option id="btnBlue" value="blue">Blue</option> <option id="btnGreen" value="green">Green</option> </select> <textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea> </div>0
He desarrollado una solución usando JavaScript simple en la solución a continuación. Se llama al método SetColor() cuando se activa el evento onchange del elemento <select> ; el valor del elemento seleccionado en el elemento <select> se asigna al estilo de color del elemento <textarea> .
function SetColor() { var value = document.getElementById("selectElement").value; var textareaElement = document.getElementById("resultTextArea"); textareaElement.style.color = value; } .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } <div class="container"> Select Color: <select id="selectElement" onchange="SetColor()"> <option>Choose a Color</option> <option id="btnRed" value="red">Red</option> <option id="btnBlue" value="blue">Blue</option> <option id="btnGreen" value="green">Green</option> </select> <textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>