Fatal编程技术网
  • javascript/
  • Javascript 用于检测选项值的代码未按预期工作

Javascript 用于检测选项值的代码未按预期工作

javascript html

Javascript 用于检测选项值的代码未按预期工作,javascript,html,compare,Javascript,Html,Compare,我试图用javascript进行一些字符串比较。我看过一些教程和示例，但它们似乎不起作用。我错过了一些基本的东西 尝试1 function addAspect(aspect) { var print = document.createElement('p'); var ptext; if (aspect == "Option1") ptext = document.createTextNode("This is option1"); } 不起作用 然后我找到了这个例子

我试图用javascript进行一些字符串比较。我看过一些教程和示例，但它们似乎不起作用。我错过了一些基本的东西

尝试1

function addAspect(aspect) {
    var print = document.createElement('p');
    var ptext;

    if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
不起作用

然后我找到了这个例子，所有的读者都说它很好用

function addAspect() {
    var print = document.createElement('p');
    var ptext;

    var aspect = String(document.getElementById("aspectResult").value);

    if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
不起作用

我还尝试了
.toString（）
以及
'='
精确匹配比较

完整代码

<html>
    <head>
    <script type="text/javascript">
        function addAspect()
        {
            var print = document.createElement('p');
            var ptext;
            var aspect = document.getElementById("aspectResult").value;
            if (aspect == "Option1"){
                ptext = document.createTextNode("This is option1");
            }
            print.appendChild(ptext);
            document.getElementById("mainBlock").appendChild(print);
        }
        </script>
    </head>
    <body>
        <form>
            <select id="aspectResult">
                <option value="Option1">Option1</option>
            </select>
            <input type="button" value="Check" onclick="addAspect()"/>
        </form>
        <span id="mainBlock">&nbsp</span>
    </body>
</html>


函数addAspect（）
{
var print=document.createElement（'p'）；
var-ptext；
var aspect=document.getElementById（“aspectResult”）.value；
如果（方面==“选项1”）{
ptext=document.createTextNode（“这是option1”）；
}
print.appendChild（ptext）；
document.getElementById（“mainBlock”）.appendChild（打印）；
}
选择1
 
有什么建议吗？

您的函数创建了一个文本节点，但没有对其执行任何操作，因此您的代码似乎什么都没有执行。您需要将文本节点附加到DOM中的某个元素：

document.body.appendChild(ptext);
您的完整代码在IE9、Firefox4和Chrome11中运行良好。请参阅。

如果您试图在段落中添加
ptext
，则需要在末尾添加两行：

function addAspect(aspect) {
    var prnt = document.createElement('p');
    var ptext;
    if( aspect == "Option1" ) {
        ptext = document.createTextNode("This is option1");
        prnt.appendChild(ptext); // Add the text to the paragraph
        document.body.appendChild(prnt); // Add the paragraph to the document
    }
}
首先，介绍一下下拉列表的工作原理：

<select id="aspectResult">
    <option value="Option1">Option1</option>
</select>
然后，创建包含文本节点的
元素：

var p = document.createElement('p'),
txt;

if (selectedValue == 'Option1') {
    txt = document.createTextNode('This is option 1');
}
之后，您可以将新创建的段落附加到您选择的容器中：

var container = document.getElementById('mainBlock');

if (txt) {
    p.appendChild(txt);
    container.appendChild(p);
}

能否显示aspectResult的html？在if语句前的一行中对aspect发出警报，并查看弹出窗口中的内容-警报（aspect）；选项1-一个选项，这样hings就不会混淆。它在一个元素中。谢谢警告是有效的，当你说“不起作用”时，它会说“选项1”，这是什么意思？我已经这么做了，我只是没有给你看这部分。我已经将它正确地添加到了主体中——我已经用一个随机字符串而不是element@user：您应该粘贴完整的代码-很明显，到目前为止您发布的代码没有任何问题。完整代码（我无法回答自己的问题）函数addAspect（）{var print=document.createElement（'p'）；var ptext；var aspect=document.getElementById（“aspectResult”）.value；if（aspect==“Option1”）ptext=document.createTextNode（“这是Option1”）；}很抱歉，我忘了输入将其添加到跨度的行，但这些行是above@user：您可以编辑问题以将此代码包含在相关部分。
print
在ECMAScript中既不是保留字，也不是将来的保留字。@Andy E:抱歉，更正。“print”在某些环境中使用（而且它也弄错了语法高亮），所以避免它可能更安全。@user291652:你看了最后两行代码了吗？我没有看到你问题中的那两行……我有这些行，如果你看下面，你会看到一个抽象的代码（忽略你无法访问的敏感信息） 
var container = document.getElementById('mainBlock');

if (txt) {
    p.appendChild(txt);
    container.appendChild(p);
}