如何使用JavaScript显示值？_Javascript_Html

如何使用JavaScript显示值？

javascript html

如何使用JavaScript显示值？,javascript,html,Javascript,Html,我是JavaScript新手，我在输入字段中有一个值，比如0或1，当这个值改变时，一个单词分别变为“Off”或“On” 我知道这很简单，但正如我所说的，我对JavaScript是新手您的代码目前看起来如何？到目前为止你试过什么编辑我现在正在编写代码，所以到目前为止没有什么了不起的： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title h

我是JavaScript新手，我在输入字段中有一个值，比如0或1，当这个值改变时，一个单词分别变为“Off”或“On”

我知道这很简单，但正如我所说的，我对JavaScript是新手

您的代码目前看起来如何？到目前为止你试过什么

编辑我现在正在编写代码，所以到目前为止没有什么了不起的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function change(value) {
        if (value == 1)
            return "ON";
        else
            return "OFF";
    }
</script>

</head>
<body>

    <input type="text" value="1" />
    <p>ON OR OFF RIGHT HERE</p>

</body>
</html>


在此处插入标题
功能更改（值）{
如果（值==1）
返回“ON”；
其他的
返回“关”；
}
在这里开还是关

你遇到了什么困难

我需要这个值一直在更新，如果输入字段的值改变，单词也必须改变

如果您是javascript新手，那么为了入门，到目前为止您阅读了哪些教程/文章/书籍

现在没有具体的教程，我在谷歌上搜索

编辑2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function change(){
        toggler = document.getElementById('toggler');
        onoff = document.getElementById('onoff');
        toggler.onChange = function(e){
            onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
        }
    }
</script>

</head>
<body>

    <input type="text" id="toggler" value="1" onkeyup="change()" />
    <div id="onoff"></div>

</body>
</html>


在此处插入标题
函数更改（）{
toggler=document.getElementById（'toggler'）；
onoff=document.getElementById（'onoff'）；
toggler.onChange=函数（e）{
onoff.innerHTML=（toggler.value==1）？'on'：'off'；
}
}

我试图按照建议做，但仍然不起作用，伙计们，我做错了什么？

您没有发布任何代码，但这里有一些通用代码：

你的意见：

<input type='text' id='myinput' onkeyup='contentChanged(this)' />

编辑：

既然你已经发布了你的代码，你可以像我说的那样：

<input type="text" value="1" onkeyup="change(this.value)" />

Number

函数对于转换输入数据非常重要，并确保输入的数据是一个数字。另外，在文本字段中添加

maxlength

属性，以限制用户输入数据：

<input type="text" id="toggler" value="1" onkeyup="change()" maxlength="1" />

您需要在输入字段中添加onChange处理程序，这可以通过多种方式完成。例如，假设您的输入的id为#toggler，需要显示开或关的元素的id为#onoff

您的代码目前看起来如何？你遇到了什么困难？到目前为止你试过什么？如果您是javascript新手，那么为了入门，到目前为止您阅读了哪些教程/文章/书籍？由于您是JS新手，这里有几个问题：您的HTML看起来像什么？当输入字段值更改时，是否希望单词更改？或者当（输入字段内部）按下键盘键时？还是被释放？或者当磁场失去焦点时？或（这将决定使用哪个事件…@DarinDimitrov我更新了我的帖子，很抱歉缺少信息。@ValterHenrique，很好，现在你的问题很好了。查找与条件：

onoff.innerHTML=['off'，'on'][toggler.value]

@Jørgen Thx用于+1，但为了让它真正不引人注目，我必须把它放在一个自动执行函数中，但这超出了这个答案的范围。没有双关语的意思：pYou是对的，关于你的解决方案需要修改，主题在范围之外：）然而，这比使用元素属性要好得多。在阅读了问题中添加的代码后，我注意到toggler.value将接收的是一个字符串。因此，条件应该变成

（toggler.value==“1”）

。此条件更精确，因为它使用===运算符，该运算符执行更严格的比较。在@katspaugh提到的例子中，您必须将该值转换为int，因此代码如下：`onoff.value=['on'，'off'][Number（toggler.value）]Frederik Creemers，正好相反。对象属性名称是字符串。当您迭代数组（

for（var i=0；i

）时，索引强制从数字到字符串。虽然这个答案在技术上是正确的，但您正在标记中添加javascript代码。如果在javascript代码中声明处理程序，则内容和行为是分开的。这被称为“不引人注目的javascript”。@Frederikcreems我试图发布一个简单的答案，以便他能够轻松理解。虽然你的答案确实更简单，但从一开始就向人们传授最佳实践，最终会成为一名更好的程序员。顺便说一句，我无意冒犯你的回答，它在技术上是正确的。@Frederikcreamers谢谢你，只是想传递我的一点知识。@Márcio我正试图按照你的建议去做，但不起作用，你能在帖子中看到我的代码吗，我更新了它。
function change(){
    toggler = document.getElementById('toggler');
    onoff = document.getElementById('onoff');
    onoff.value = (Number(toggler.value)==1)? 'on' : 'off';
}

<input type="text" id="toggler" value="1" onkeyup="change()" maxlength="1" />

toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
    onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}