使用文本框更改div颜色

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. 我正在尝试制作一个小型javascript程序，其中有一个Div最初是透明的，并且其中包含一个editbox。 But I want that transparent div to become pink if the text inside editbox is not number. 但是，如果editbox中的文本不是数字，我希望该透明div变为粉红色。 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. 我正在尝试仅使用字母“ a”而不是数字来检查是否至少有任何效果……所以请提供任何建议。 Thank you! 谢谢！

Later Edit: HTML part: 稍后编辑：HTML部分：

<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. 就像那里有数字以外的其他东西一样，使div变粉红色。 if it is Number, div remains transparent. 如果为Number，则div保持透明。

Answer 1

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>

Answer 2

You need to add a change event handler to the editbox (input, textarea?) and execute your code. 您需要将更改事件处理程序添加到编辑框（输入，textarea？）并执行代码。

Also, don't change the id because then when your code is executed again it will fail at getElementById("proz") . 另外，请不要更改id因为当您再次执行代码时，它将在getElementById("proz")处失败。 Use a css class instead to format the element. 请改用CSS类来格式化元素。

Here you have a working version (the div will be pink when the value of the input text is a ): 这是一个工作版本（当输入文本的值为a时，div将为粉红色）：

 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>

Answer 3

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. 如果不是数字，它将使文本框周围的透明div变为粉红色。 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>

使用文本框更改div颜色

问题描述

3 个解决方案

解决方案1
0 2018-04-20 18:06:07

解决方案2
0 2018-04-20 18:15:09

解决方案3
0 2018-04-20 18:15:45

使用文本框更改div颜色

问题描述

3 个解决方案

解决方案1 0 2018-04-20 18:06:07

解决方案2 0 2018-04-20 18:15:09

解决方案3 0 2018-04-20 18:15:45

解决方案1
0 2018-04-20 18:06:07

解决方案2
0 2018-04-20 18:15:09

解决方案3
0 2018-04-20 18:15:45