Добавить HTML код в переменную JavaScript

Question

Ok .. Так что у меня есть HTML элемент, который отображает текущее значение, значение изменяется с помощью ползунка диапазона, я изменить значение элемента HTML с использованием JavaScript с помощью следующего кода:

hex_out = document.querySelector('#hex'); 
hex_out.value=rangeValue; 

Который выше работает отлично, но в последнее время я должен был быть в состоянии добавить немного HTML кода в hex_out.value

, например, если я попробовать

hex_out.value="<font color='red'>"+rangeValue+"</font>"

это изменит hex_out.value к коду, указанному ниже

<font color='red'>Range slider value</font>"

, который, очевидно, не то, что я пытаюсь сделать. Как бы добавить html-код в hex_out.value и отобразить его правильно?

Прежде чем кто пробует сказать: «Это дубликатом вопрос», понимаю, я пробовал почти все решения, показанные на переполнение стека без везения

EDIT: Вот несколько фотографий:

Это то, что тем он должен выглядеть следующим образом:

Но после изменения значения ползунка диапазона отображается следующим образом:

обратите внимание, как он отображает HTML-код, когда этого не должно быть? ну да вот моя проблема :(

EDIT: Спасибо StackOverflow сообществу я получил это работает со всеми вашей помощью, спасибо

Answer 1

Вам нужно изменить цвет с помощью свойства стиля элемента Попробуйте!. следующий:

hex_out.style.color = 'red'; 

Если вам нужно добавить любой HTML, а затем (при условии, что hex_out элемента является контейнер, а не <input> тега), вы можете присвоить HTML своего свойства innerHTML следующим образом:

hex_out.innerHTML = '<strong>This is a <em>formatted</em> value.</strong>'; 

Другое редактирование: похоже, что вы используете элемент <output>, который не принимает дочерние элементы, насколько я знаю. В этом случае вы, скорее всего, захотите использовать обычный или <span> тег вместо <output> и затем обновить его значение вручную, когда ваши ползунки перемещаются, используя свойство innerHTML, описанное выше.

Answer 2

Я думаю, что вы ищете что-то вроде этого:

var hex_out = document.querySelector('#hex'), 
 
    rangeValue = document.querySelector('#val'); 
 

 
rangeValue .addEventListener('input', function() { 
 
    hex_out.innerHTML = "<font color='red'>"+rangeValue .value+"</font>"; 
 
}, false);

<input type=range id=val> 
 
<span id=hex>50</span>

Answer 3

пример вы дали это то, как правило, ожидают от JavaScript. Я считаю, что вы хотите изменить html существующего элемента, а не значение.Если вы можете использовать ниже код:

hex_out. innerHTML ="<font color='red'>"+rangeValue+"</font>" 

Existing скрипки ссылка JSFiddle

протестирован и работает:

function setColor() { debugger; 
    Rval = parseFloat((r_out.value/255.00).toFixed(3)); 
    Gval = parseFloat((g_out.value/255.00).toFixed(3)); 
    Bval = parseFloat((b_out.value/255.00).toFixed(3)); 
    hex = "R: " + Rval + " " + "G: " + Gval + " " + "B: " + Bval; 
    var r_hex = parseInt(r.value, 10).toString(16), 
    g_hex = parseInt(g.value, 10).toString(16), 
    b_hex = parseInt(b.value, 10).toString(16), 
    hex1 = "#" + pad(r_hex) + pad(g_hex) + pad(b_hex); 
    body.style.backgroundColor = hex1; 
    hex_out.innerHtml = hex + [ 
'<br/><font size="1px">GSC RGB Selector by thahitcrew</font>' 
].join('#hex'); 
} 

Answer 4

Ваша трудность возникла потому, что вы положили устаревшую font tag в output tag, который принимает только «формулировка содержания». Тег шрифта не поддерживается в HTML5, а не в списке элементов содержимого.

Как сказал @Mark, простой div будет работать, если требуется, чтобы HTML был визуализирован.