Единственное, что я изменил в своем коде, - это то, что я изменил идентификаторы, например previewContrast, на preview_contrast и получаю нулевую ошибку значения свойства. Ошибка отображается для строки "var color = colorObjekt.value.replace (" # "," ");
Буду признателен, если кто-то сможет найти ошибку в этом коде.
var textColorContrast = getColor('txtColor');
var bgColorContrast = getColor('bgColor');
var lumi1 = getLumi(textColorContrast);
var lumi2 = getLumi(bgColorContrast);
if (lumi1 !== false && lumi2 !== false) {
txtColor.style.color = '#'+textColorContrast;
bgColor.style.backgroundColor = '#'+bgColorContrast;
var ratio = (Math.max(lumi1, lumi2) + 0.05) / (Math.min(lumi1, lumi2) + 0.05);
contrastText.innerHTML = (Math.round(ratio * 100) / 100) + ':1';
}
function getColor(location) {
var colorObjekt = document.getElementById(location);
var color = colorObjekt.value.replace("#", "");
return color;
}`
Вот HTML
<div class="tab-content container-fluid" id="navi_content" role="main">
<div class="tab-pane fade show active" id="post" role="tabpanel" aria-labelledby="post-tab">
<div class="row" role="row">
<h2 role="heading" class="col-10">Input</h2>
<div class="col-2" role="gridcell">
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-info" role="button"
data-toggle="popover" title="Info" data-trigger="focus"
data-content="On this page you can enter a text to display on the LED Scroll Board. You can also change the background and text color as well as the speed and brightness settings in the Settings modal. By selecting the Date or Clock Mode you can post the current date or time on to the board"
data-placement="bottom"></button>
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-cogs" role="button" data-toggle="modal"
title="Settings" data-target="#settings"></button>
</div>
</div>
<form class="text__form" id="form">
<div class="form-row" role="row">
<div class="form-group col-10" role="gridcell">
<label class="text__label" for="text__input" id="input_label">
Your message:
</label>
<input type="text" class="form-control text__input-text" id="text_input"
placeholder="Text input here... :)" role="textbox" aria-required="true" aria-labelledby="input_abel" required>
<p class="text__counter">150 characters left...</p>
</div>
<div class="col-2 text__colorpicker" role="gridcell">
<div class="form-group" role="gridcell">
<label class="text__label" for="text_color" id="text_color_label">Text Color</label>
<input class="text__input-color" type="color" name="textcolor" id="text_color" value="#ff0000"
aria-labelledby="text_color_label">
</div>
</div>
</div>
<div class="card" role="none">
<div class="card-body" role="group">
<h3 class="card-header" role="heading">Modes</h3>
<fieldset class="form-check" id="color_radios">
<legend class="col-form-label text__card-label" id="modes_legend">
Color Modes
</legend>
<div class="row" role="row">
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode"
id="rainbow_mode" value="1" role="radio" aria-labelledby="rainbow_label">
<label for="rainbow_mode" class="form-check-label text__card-label" id="rainbow_label">Rainbow
Mode</label>
</div>
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode" id="solid_mode"
value="0" role="radio" aria-labelledby="solid_mode_label" aria-checked="true" checked>
<label for="solid_mode" class="form-check-label text__card-label" id="solid_mode_label">Solid
Mode</label>
<div class="form-group" role="form">
<label for="bg_color" id="bg_color_label" aria-label="Background Color"> Color</label>
<input type="color" name="bgColor" id="bg_color" value="#ABCDEF" aria-labelledby="bg_color_label">
</div>
</div>
</div>
</fieldset>