Question

我正在尝试制作一个页面，其中usere可以在两个产品之间进行选择，并在两个字段中输入一些文本，这些字段将附加在链接的末尾。我的页面工作原理如果我先输入文本然后选择该选项，但是如果我首先选择产品选项，则文本不会附加，如果我在链接显示后尝试更新字段中的文本，它将保持不变。我是JavaScript的初学者，所以对于我出错的地方的任何建议都会非常感激吗？

<html>
    <head>
    <script type="text/javascript">
        function productChange(product) {
            var val = product.value
            var idTag = document.getElementById("idTag");
            var trackingTag = document.getElementById("trackingTag");

            if (val == 'Movies') {
               document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
               document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
            } else {
                document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
                document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;

            }
        }
    </script>
    </head>
    <body>
    Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
    Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
    <br><br>
    ID: <input type="text" id="idTag" onchange="productChange()"><br>
    Tracking: <input type="text" id="trackingTag" onchange="productChange()">
    <br><br>
    <div align="center" id="divProductChangeLinkTitle"></div>
    <br><br>
    <div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
    </body>
    </html>

Answer 1

在你的方法中，当输入文本发生onChange事件时，val是未定义的，因为你没有传递任何东西，所以在productChange（）方法中，你可以直接得到单选按钮值，我在你的代码中做了一些更改，请查看fiddle -

HTML -

Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange()' id="MoviesRadio" /><br>
Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange()' id="EntsRadio" />
<br><br>
ID: <input type="text" id="idTag" onchange="productChange()"><br>
Tracking: <input type="text" id="trackingTag" onchange="productChange()">
<br><br>
<div align="center" id="divProductChangeLinkTitle"></div>
<br><br>
<div id="divProductChangeFinalMovLink" style="color: #000000;"></div>

Javascript -

function productChange() {

        var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value; 
        var idTag = document.getElementById("idTag").value;
        var trackingTag = document.getElementById("trackingTag").value; 

        if (val == 'Movies' && idTag && trackingTag) {
           document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
           document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag + '&omniture=' + trackingTag;
        } else if(val=='Entertainment'  && idTag && trackingTag){
            document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
            document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag + '&omniture=' + trackingTag;

        }
    }

现在，如果选择单选按钮并且两个输入都有一些值，那么只会显示链接

Answer 2

嘿上面的代码工作正常，但你还要设置一个条件来检查至少一个单选按钮，然后填写输入值，直接填充那些输入文本字段，它给出了错误。因此需要检查一个单选按钮。

Answer 3

<html>
    <head>
    <script type="text/javascript">
        function productChange(product) {
            var val = document.querySelector('input[type="radio"][name="ProductRadio"]:checked').value; 
            var idTag = document.getElementById("idTag");
            var trackingTag = document.getElementById("trackingTag");

            if (val == 'Movies') {
               document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #680091;">Your movies link is:</span>';
               document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/MOVIES?cid=' + idTag.value + '&omniture=' + trackingTag.value;
            } else {
                document.getElementById('divProductChangeLinkTitle').innerHTML = '<span style="color: #FF7000;">Your ents link is:</span>';
                document.getElementById('divProductChangeFinalMovLink').innerHTML = 'https://www.link/ENTS?cid=' + idTag.value + '&omniture=' + trackingTag.value;

            }
        }
    </script>
    </head>
    <body>
    Movies: <input name="ProductRadio" type="radio" value="Movies" onclick='productChange(this)' id="MoviesRadio" /><br>
    Ents: <input name="ProductRadio" type="radio" value="Entertainment" onclick='productChange(this)' id="EntsRadio" />
    <br><br>
    ID: <input type="text" id="idTag" onchange="productChange()"><br>
    Tracking: <input type="text" id="trackingTag" onchange="productChange()">
    <br><br>
    <div align="center" id="divProductChangeLinkTitle"></div>
    <br><br>
    <div id="divProductChangeFinalMovLink" style="color: #000000;"></div>
    </body>
    </html>

您需要在调用productChange函数时传递值。

Javascript DIV没有更新更新

3 个答案: