Estoy intentando crear una página donde el usuario pueda elegir entre dos productos e ingresar texto en dos campos que se agregarán al final de un enlace. Mi página funciona Si ingreso el texto primero y luego elijo la opción, sin embargo, si selecciono primero la opción del producto, el texto no se adjunta y si intento actualizar el texto en los campos una vez que se muestra el enlace, sigue siendo el mismo. Soy un poco principiante en JavaScript, por lo que agradecería cualquier sugerencia sobre dónde me estoy equivocando.

<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>
0
Daniel Moore 17 feb. 2017 a las 14:33

3 respuestas

La mejor respuesta

En su método, cuando ocurre un evento onChange para el texto de entrada, entonces val no está definido, porque no está pasando nada, por lo que en el método productChange (), puede obtener los valores de los botones de radio directamente, he realizado algunos cambios en su código, verifique 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;

        }
    }

Ahora, si se selecciona el botón de opción y ambas entradas tienen algún valor, solo se mostrará el enlace

0
Ayush Sharma 17 feb. 2017 a las 11:46
<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>

Debe pasar valor al llamar a la función productChange.

-1
Akash Thakkar 17 feb. 2017 a las 12:30

Oye, el código anterior está funcionando, pero también debe establecer una condición para verificar al menos un botón de radio y luego completar los valores de entrada en el llenado directo de los campos de texto de entrada que está dando error. Entonces, un botón de radio debe ser verificado.

0
Rupali Pemare 17 feb. 2017 a las 12:53