Tengo un color de tipo de entrada Cuando elegiré el color allí, quiero mostrarlo entre etiquetas de anclaje como esa <a>#FFFFFF</a>
Esto es lo que hago en HTML
<input type="color" id="demo"> // choose color from here <a id="demo" > HEX code here. </a>Use Javascript para agregar un detector de eventos a su selector de color, luego, cuando se seleccione un color, establezca la propiedad innerText de su ancla en el valor objetivo:
var colorPicker = document.getElementById('demo'); var anchor = document.getElementById('anchor'); colorPicker.addEventListener("input", watchColourPicker, false); function watchColourPicker(event) { anchor.innerText = event.target.value; } <input type="color" id="demo"> <a id="anchor" > HEX code here. </a>Un controlador de eventos de Input muy simple asignado al elemento de entrada debería ser suficiente, así:
document.querySelector('[type="color"]').addEventListener('input',function(e){ this.nextElementSibling.textContent=this.value }) <input type="color" id="demo"> <a id="demo" ></a>EventTarget.addEventListener()
El método EventTarget addEventListener() configura una función que se llamará cada vez que el evento especificado se entregue al objetivo.
Nodo.textContent
La propiedad textContent de la interfaz Node representa el contenido de texto del nodo y sus descendientes.
Nota:
textContentyHTMLElement.innerTextse confunden fácilmente, pero las dos propiedades son diferentes en aspectos importantes .
let color_picker = document.getElementById("color_picker"); let hex_code = document.getElementById("hex_code"); color_picker.addEventListener("input", function () { let code = color_picker.value; hex_code.textContent = code; hex_code.setAttribute("href", code); }, false); <input type="color" name="" id="color_picker" /> HEX CODE: <a href="" id="hex_code"></a> Fuente: MDN Web Docs