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

发布于 2024-11-08 19:16:00 字数 1636 浏览 2 评论 0原文

我试图在 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>

有什么建议吗？

原文

I was attempting to do some string comparisons in javascript. I have seen several tutorials and examples but they do not seem to work. I am missing something fundamental?

Attempt 1

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

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

Doesnt work.

Then I found this example to which all readers said it worked fine

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");
}

Doesnt work.

I also tried .toString() as well as the '===' exact match comparison.

Full code

<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"> </span>
    </body>
</html>

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北陌 2024-11-15 19:16:00

首先，简单介绍一下下拉列表的工作原理：

<select id="aspectResult">
    <option value="Option1">Option1</option>
</select>

要从下拉列表中读取所选值，您应该执行以下操作：

var dropdown = document.getElementById('aspectResult'),
selectedValue = dropdown.options[dropdown.selectedIndex].value;

，创建内部包含文本节点的

元素：

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);
}

现在就一起来吧！

First, a small introduction to how dropdowns work:

<select id="aspectResult">
    <option value="Option1">Option1</option>
</select>

To read the selected value from the dropdown, you should do this:

var dropdown = document.getElementById('aspectResult'),
selectedValue = dropdown.options[dropdown.selectedIndex].value;

Then, you create the <p> element with a text node inside:

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

if (selectedValue == 'Option1') {
    txt = document.createTextNode('This is option 1');
}

Afterwards, you can append the newly created paragraph to the container of your choice:

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

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

All together now!

回复收藏 0 原文

悲喜皆因你 2024-11-15 19:16:00

如果您尝试将 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
    }
}

If you are trying to add the ptext to the paragraph, you need to add two lines to the end:

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
    }
}

回复收藏 0 原文

奶气 2024-11-15 19:16:00

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

document.body.appendChild(ptext);

您的完整代码似乎在 IE9、Firefox 4 和 Chrome 11 中工作正常。请参阅 http://jsbin.com/ekura5/。

Your function creates a text node but then does nothing with it, so you code appears to do nothing at all. You need to append the text node to an element somewhere in the DOM: