使用文本框更改 div 颜色答案

【问题标题】：change div color with textbox使用文本框更改 div 颜色
【发布时间】：2018-10-01 12:09:00
【问题描述】：

我正在尝试制作一个小的 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 保持透明。

【问题讨论】：

您要检查这个.. 现场吗？如。用户在框中键入的那一刻？或者在单击按钮或其他事件后检查这个？另外，你能发布你的html吗？
您需要将更改event handler 添加到编辑框（输入、文本区域？）并执行您的代码。另外，不要更改id，因为当您的代码再次执行时，它将在getElementById("proz")p 处失败。改用 css 类来格式化元素。
看看我的回答。

标签： javascript html editbox

【解决方案1】：

你的目标是这样的吗？

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>

【讨论】：

【解决方案2】：

您需要将更改event handler 添加到编辑框（输入、文本区域？）并执行您的代码。

另外，不要更改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>

【讨论】：

【解决方案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>

【讨论】：

我认为isNaN(6) 应该是isNaN(textbox)。