Question

我正在尝试创建一个小的javascript程序，其中我最初有一个透明的Div，并且里面包含一个编辑框。但是如果编辑框内的文字不是数字，我希望透明的div变成粉红色。我怎样才能做到这一点？我试过这样的事情，但没有任何作用：

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
    }
}

我正在尝试只使用字母“a”而不是数字来检查是否有任何作用至少...... 所以请给我任何建议。谢谢！

后来编辑： 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>

是的，我正试图立即制作它。就像在那里有一些不是数字的东西，让div粉红色。如果是Number，则div保持透明。

Answer 1

这就是你想要的东西吗？

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要在编辑框中添加更改event handler（输入，textarea？）并执行您的代码。

此外，请勿更改id，因为当您的代码再次执行时，它将在getElementById("proz")失败。请改用css类来格式化元素。

这里有一个工作版本（当输入文本的值为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

我不确定你想要实现什么，但这是我根据你的问题解释你可能想要的东西。这段代码检查输入是否是一个数字。如果是，那么它什么都不做。如果它不是数字，它将使文本框周围的透明div变为粉红色。希望它在某种程度上有所帮助

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 个答案: