1

Есть поле ввода и ссылка. Если условие не выполнено, то ссылка должна отключаться и изменяется текст. Как сделать чтобы менялся цвет фона ссылки?

1
  • 2
    Как седлать? кого? коня?
    – user245150
    10 авг 2017 в 9:28

3 ответа 3

1

Добавляет класс если не правильно

var link = document.getElementById('test');
link.classList.add("deactive");
document.getElementById('123').addEventListener('input', function() {
  link.style['pointer-events'] = 'initial';
  if (/ДА/gi.test(this.value)) {
    link.href = 'yes';
    link.innerText = 'Перейти ->';
link.classList.remove("deactive");
  }else {
  link.removeAttribute('href');
    link.innerText = 'Введите "ДА"';
    link.classList.add("deactive");
  }  
}, false);
.deactive {
margin-left:40px;
background-color: red;
color:white;
}
<input value='' name='name' id=123>
<a id='test'>Введите "ДА"</a>

1
  • Duoxx опять спасибо вам:)
    – Doc-com
    10 авг 2017 в 10:02
1

// Для смены цвета фона используется конструкция .style.background на элемент со ссылкой
function changeLink() {
  document.getElementById('link').style.background = this.value;
};
var input = document.getElementsByTagName("INPUT")[0];
input.oninput = changeLink; // присоединяем функцию выше к событию изменения значения в текстовом поле.
changeLink.apply(input); // это чтобы цвет применился сразу 
<input type="text" value="red" />
<a id="link" href="#" text="11">Send</a>

Просто введите цвет (red, green) в инпут, а он поменяет цвет заднего плана у ссылки

1

Через background:

function test(){
  if($('#input').val() != 4){
    $('#link').addClass('error');
  }else{
    $('#link').removeClass('error');
  }
}
.error{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>2+2? <input type="text" id="input"></label>
<button onclick="test()">проверить</button>
<a id="link" href="#">Ссылка</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.