Question

需要根据用户文本输入id = pcode显示给定的div（valueV，valueJ＆amp; valueO）。脚本js，形式和分区如下，但不起作用。尝试了不同的方法并引用了堆栈，无法修复，请帮助

<script type="text/javascript">
var pcode;
function onload() { 
    pcode = document.getElementById('pcode');
}

function kk() {
if (pcode == 'v') {
    document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
    document.getElementById("valueJ").style.display = "inline";
}
} else {
    document.getElementById("valueO").style.display = "inline";
}
}    
</script>

<body onload="onload();">
<input type="text" name="two"  value="" id="pcode" maxlength="1" size="1">  &nbsp;<input type="button" value="Submit" onclick="kk();"/>
</body>

<div id="valueV" style="display: none;">
    Value V
</div>
<div id="valueJ" style="display: none;">
    Value J
</div>
<div id="valueO" style="display: none;">
    Value O
</div>

Answer 1

pcode是DOM元素，您将它与字符串进行比较。一个简单的console.log(pcode)会告诉你。你需要看看价值。

if (pcode.value === "j")

Answer 2

您应该阅读addEventListener。使用HTML属性来附加事件侦听器将引导您到几个全局变量的路径（以及一些丑陋的标记）。

document.addEventListener('DOMContentLoaded', function () {
    var pcode = document.getElementById('pcode');

    document.querySelector('.submit').addEventListener('click', function () {
        if (pcode.value == 'v') {
            document.getElementById("valueV").style.display = "inline";
        } else if (pcode.value == 'j') {
            document.getElementById("valueJ").style.display = "inline";
        } else {
            document.getElementById("valueO").style.display = "inline";
        }
    });
});

<body>
    <input type="text" name="two" value="" id="pcode" maxlength="1" size="1"> &nbsp;
    <input type="button" value="Submit" class="submit" />

    <div id="valueV" style="display: none;">
        Value V
    </div>
    <div id="valueJ" style="display: none;">
        Value J
    </div>
    <div id="valueO" style="display: none;">
        Value O
    </div>
</body>

Answer 3

我试图让您的代码尽可能与您保持相似，但不做任何重大更改，但确保它仍然有用。

我为你改变了一些东西，我删除了你在其他声明中的额外括号。

我也删除了;你参考了html中的函数。我希望这段代码是您所需要的：

<body onload="onload()">
<input type="text" name="two"  value="" id="pcode" maxlength="1" size="1">  &nbsp;<input type="button" value="Submit" onclick="kk()"/>
</body>

<div id="valueV" style="display: none;">
    Value V
</div>
<div id="valueJ" style="display: none;">
    Value J
</div>
<div id="valueO" style="display: none;">
    Value O
</div>

<script>
var pcode;
function kk() {
  pcode = $('#pcode').val();
if (pcode == 'v') {
    document.getElementById("valueV").style.display = "inline";
} else if (pcode == 'j') {
    document.getElementById("valueJ").style.display = "inline";
} else {
    document.getElementById("valueO").style.display = "inline";
}
} 
</script>

任何问题都可以问！

Js显示部门无法正常工作

3 个答案: