Javascript 使用文本框更改div颜色_Javascript_Html_Editbox

Javascript 使用文本框更改div颜色

javascript html

Javascript 使用文本框更改div颜色,javascript,html,editbox,Javascript,Html,Editbox,我正在尝试制作一个小的javascript程序，其中有一个Div，最初是透明的，里面包含一个editbox。但是如果editbox中的文本不是number，我希望透明div变成粉红色。我该怎么做？我尝试过类似的方法，但没有任何效果： function proz(){ var textbox = document.getElementById("nr").value; / nr is editbox var div = document.getElementById("proz")

我正在尝试制作一个小的javascript程序，其中有一个Div，最初是透明的，里面包含一个editbox。但是如果editbox中的文本不是number，我希望透明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>


帕努中心酒店
帕吉纳的垂直和水平中心全景图
函数检查（）{
var textbox=document.getElementById（“nrintreg”）.value；
if（document.getElementById（“nrintreg”）.value==“a”）{
window.alert（'omg'）
}
}

是的，我正在努力做到这一点。比如，如果有一个数字以外的东西，使div变成粉红色。如果是Number，则div保持透明

像这样的东西是你想要的吗

var textbox=document.getElementById（“nr”）；//nr是editbox
var div=document.getElementById（“proz”）；//proz是透明的div
函数proz（）{
div.style.backgroundColor=textbox.value
}
textbox.addEventListener（'input'，函数（evt）{
proz（）；
});
#proz{
高度：250px；
宽度：250px；
边框：1px纯黑；
}

您需要在编辑框（输入，文本区域？）中添加更改并执行代码
另外，不要更改id
，因为当代码再次执行时，它将在getElementById（“proz”）
处失败。改用css类来格式化元素
这里有一个工作版本（当输入文本的值为a
时，div将为粉红色）：

var textbox=document.getElementById（“nr”）；
var div=document.getElementById（“proz”）；
textbox.onkeyup=proz；
函数proz（）{
如果（textbox.value==“a”）{
div.classList.add（“粉色”）；
}否则{
div.classList.remove（“粉色”）；
}
}
#proz{
宽度：100px；
高度：100px；
}
#粉红猪{
背景色：#FF9999；
}
我不确定您到底想要实现什么，但这是我根据您的问题对您可能想要的内容的解释。此代码检查输入是否为数字。如果是的话，那就什么也做不了。如果不是数字，它将使文本框周围的透明div变成粉红色。希望能有所帮助

document.getElementById（'nr'）。addEventListener（“keyup”，proz）；
函数proz（）{
var textbox=document.getElementById（“nr”）.value；
var div=document.getElementById（“proz”）；
如果（isNaN（文本框）=true）{
document.getElementById（“some div”）.style.background=“pink”；
}
其他的
{
document.getElementById（“somediv”）.style.background='transparent'；
}
}
#一些div
{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：200px；
z指数：-1；
}



是否要检查此项。。居住如在。用户在框中键入的瞬间？或者在单击按钮或其他事件后检查此选项？另外，你也可以发布你的html吗？你需要在编辑框（输入，文本区域？）中添加一个更改并执行你的代码。另外，不要更改id
，因为当代码再次执行时，它将在getElementById（“proz”）p
失败。使用css类来设置元素的格式。看看我的答案。我认为isNaN（6）
应该是isNaN（textbox）
。