JavaScript Div未更新更改

我正在尝试制作一个页面，在该页面上，我们可以在两个产品之间选择两个产品，并在两个字段中输入一些文本，这些文本将在链接结束时附加。如果我先输入文本，然后选择该选项，则我的页面有效，但是，如果我首先选择"产品"选项，则文本不附加，如果显示链接后，我尝试在字段中更新文本，则保持不变。我是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>

在您的方法中，当输入文本发生OnChange事件时，则Val是未定义的，因为您没有传递任何内容，因此在ProductChange（）方法中，您可以直接获取广播按钮值，我已经对您的代码进行了一些更改，请检查小提琴 -

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

现在，如果选择了广播按钮并且两个输入都有一些值，则仅显示链接

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

<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函数时传递价值。

相关内容

最新更新

热门标签：