Как вытянуть значение input/div?

Question

[Muxailo]

Привет.
Такой вопрос, есть input в который вводим значение и оно выводиться в div.

<div id="result"> sf</div>

var input = document.getElementById('test');
var result = document.getElementById('result');
input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
         result.innerHTML = this.value;
    }
})();

Как мне вытянуть первое значение которое я ввожу, и в зависимости от того какое оно, делать условие?

Comments

[amorphine]

не занимайтесь столь низкоуровневыми вещами, учитесь использовать фреймворки.

[Muxailo]

amorphine, угу

[gleendo]

amorphine, отличный совет (нет)

[amorphine]

iamevg_, а что бы вы посоветовали? Ассемблер?

[gleendo]

amorphine, угу

Answer 1

[gleendo]

<input type="text" class="test">
<div class="result"></div>

const input = document.querySelector(".test");
const result = document.querySelector(".result");

input.onkeyup =  input.oncopy = input.onpaste = input.oncut = event => {
  if (event.target.value == "value") { // any some condition
    result.innerHTML = event.target.value;
    // or some code
  }
};

Comments

[Muxailo]

ввожу value, ничего(

[gleendo]

Muxailo, https://jsfiddle.net/fkqndjw7/

[Muxailo]

iamevg_, да, но я например вставил если ==value
document.getElementById('test').style.color="red";
и оно не работает, или не так

[gleendo]

Muxailo, https://jsfiddle.net/fkqndjw7/3/

[Muxailo]

iamevg_, а если такое, но на просто джс?

[gleendo]

Muxailo, а я на чем написал? это и есть ванильный JS

[Muxailo]

ну да, но у Вас нету
return function() {
result.innerHTML = this.value;
}
для вывова значений

[Muxailo]

я уже достал Вас)

[gleendo]

Muxailo, а зачем? это излишний код

[gleendo]

Muxailo,

input.onkeyup =  input.oncopy = input.onpaste = input.oncut = function(value) {
  if (event.target.value == "value") {
    document.querySelector(".test").style.color = "red";
  } else {
    document.querySelector(".test").style.color = "black";
  }
};

[Muxailo]

iamevg_, а как тогда выводить то что ввожу)

[gleendo]

Muxailo, так вам что нужно? выводить то что вводите или менять цвет текста? Я вам привел пример когда выводится то что ввели по условию, потом вы перевели тему на смену цвета текста, теперь опять вам нужно выводить то что вводите. Научитесь четко ставить вопросы.

[gleendo]

Muxailo, а вообще не мешало бы открыть книгу и почитать ее, потому что то, о чем вы спрашиваете, это самые самые основы

[Muxailo]

простите.
Надо выводить текст. а стили менять в зависимости от первого введенного символа.

[gleendo]

Muxailo, при каких условиях нужно менять стили?

[Muxailo]

iamevg_, в зависимости от первого введенного символа.
подскажите 1 пример, а я дальше розберусь)

[gleendo]

Muxailo, Ну это понятно что в зависимости от первого введенного символа...А по конкретней можно?
Например если первый символ равен "G", то сделать все введенное слово красным.
https://jsfiddle.net/x9uk0rrq/1/

[Muxailo]

iamevg_, ну вроде так, да)
спасибо огромное)

Answer 2

[rejjer]

var input = document.getElementById('test');
var result = document.getElementById('result');
var firstEnter = true;
input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
        if (firstEnter) {
            firstEnter = false;
            //myCondition
        }
         result.innerHTML = this.value;
    }
})();

Comments

[Muxailo]

не очень пока работает оно, но возможно я не так пишу.
тольку тут менять?
if (firstEnter=='1') {

document.getElementById('test').style.color="red";
}

[Muxailo]

или оно так и не будет работать?

[rejjer]

if (firstEnter) сработает один раз от любого из событий, которые обрабатывает ваша функция, firstEnter здесь для счетчика этого срабатывания (исходя из вашего условия).

if (firstEnter) {
    firstEnter = false;
   document.getElementById('test').style.color="red";
}

Может быть вам необходимо получить первый символ?
Тогда вот:

var input = document.getElementById('test');
var result = document.getElementById('result');
input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
        if (input.value[0] == 1) {
            input.style.color="red";
        }
         result.innerHTML = this.value;
    }
})();

[Muxailo]

rejjer, пример работал у Вас?
просто у меня нет(

[rejjer]

Muxailo, пардон, не туда написал.

input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
      if (input.value[0] == 1) {
          input.style.color="red";
      }
      result.innerHTML = this.value;
    }
})();

[Muxailo]

rejjer,
if (input.value[0] == 1) {
строка вроде не очень верна

[rejjer]

Muxailo, codepen, что не так?

[Muxailo]

rejjer, может =="1",или нет?

[rejjer]

Muxailo, при двойном равенстве "1" из инпута автоматически преобразуется в 1 из условия, если бы сравнивали через '===' - тогда да, нужно в кавычках, но это только цифры, символы в кавычках должны быть.
Преобразование типов