change div color with textbox

Question

I am trying to make a small javascript program in which I have a Div that is transparent initially, and contains an editbox inside. But I want that transparent div to become pink if the text inside editbox is not number. How can I do this? I tried something like this but nothing works:

function proz(){
    var textbox = document.getElementById("nr").value; / nr is editbox
    var div = document.getElementById("proz"); / proz is the transparent div

    if (document.getElementById("nr").value == "a"){ / i tried with if var == "a" but nothing.
        div.setAtribute("id", "proz2"); /here proz 2 is another pink div, trying to overlay first div
    }
}

I am trying with only letter "a" instead of numbers to check if anything works at least... So any advices please. Thank you!

Later Edit: HTML part:

<body>

<div class="patratpunctat">
<h1><center> Panou centrat </center></h1>
<p> Acest panou va fi centrat vertical si orizontal in pagina.</p>

    <div class="pportocaliu">
        <div class="prosualbastru"> </div>
    </div>
    <!-- -->
    <!-- partea pentru patratul roz cu javascript-->

    <div class="proz">

        <div class="inputt">
        <input type="text" placeholder="Numar interg" name="nrintreg">
        </div>

        <script>

        function check(){
            var textbox = document.getElementById("nrintreg").value;

            if (document.getElementById("nrintreg").value == "a"){
                window.alert('omg')
            }
        }

        </script>

    </div>
</div>


</body>

And yes, I am trying to make it instantly. Like if there is something else than a number there, to make the div pink. if it is Number, div remains transparent.

are you wanting to check this.. live? As in. The instant a user types in the box? Or check this after you click a button or on some other event? Also, could you post your html as well? — PerrinPrograms, Apr 20 '18 at 18:04
You need to add a change [event handler](https://www.w3schools.com/js/js_htmldom_events.asp) to the editbox (input, textarea?) and execute your code. Also, don't change the `id` because then when your code is executed again it will fail at `getElementById("proz")p`. Use a css class instead to format the element. — raul.vila, Apr 20 '18 at 18:04

score 0 · Answer 1 · answered Apr 20 '18 at 18:06

Is something like this what you're going for?

var textbox = document.getElementById("nr"); // nr is editbox
var div = document.getElementById("proz"); // proz is the transparent div

function proz() {
  div.style.backgroundColor = textbox.value
}

textbox.addEventListener('input', function(evt) {
    proz();
});

#proz {
  height:250px;
  width:250px;
  border:1px solid black;
}

<input type="text" id="nr" />

<div id="proz"></div>

score 0 · Answer 2 · answered Apr 20 '18 at 18:15

You need to add a change event handler to the editbox (input, textarea?) and execute your code.

Also, don't change the id because then when your code is executed again it will fail at getElementById("proz"). Use a css class instead to format the element.

Here you have a working version (the div will be pink when the value of the input text is a):

var textbox = document.getElementById("nr");
var div = document.getElementById("proz");

textbox.onkeyup = proz;

function proz() {
    if (textbox.value == "a") {
        div.classList.add("pink");
    } else {
        div.classList.remove("pink");
    }
}

#proz {
  width: 100px;
  height: 100px;
}

#proz.pink {
  background-color: #FF9999;
}

<input id="nr" />
<div id="proz"></div>

PerrinPrograms · Answer 3 · 2018-04-20T18:44:20.193

I'm not sure exactly what you're trying to achieve but this was my interpretation of what you might want based on your question.This code checks if the input is a number. If it is, then it will do nothing. If it isn't a number, it will make the transparent div around the text box pink. Hope it helps in some way

document.getElementById('nr').addEventListener("keyup", proz);
function proz(){
 var textbox = document.getElementById("nr").value; 
 var div = document.getElementById("proz"); 
 if (isNaN(textbox) == true){ 
  document.getElementById("some-div").style.background = "pink";
  }
  else
  {
  document.getElementById("some-div").style.background = ' transparent';
  }
}

#some-div
{
position: absolute;
top: 0;
left: 0;
width:200px; 
height:200px; 
z-index:-1; 
}

<div id = "some-div"> 
<input type="text" id='nr'><br>
  

</div>

I think `isNaN(6)` should be `isNaN(textbox)`. – raul.vila Apr 20 '18 at 18:16 — raul.vila, Apr 20 '18 at 18:16

change div color with textbox

3 Answers3