Soporte » Guías – Resolución de problemas » Uncaught TypeError: Cannot read property ‘value’ of undefined

  • roman2099

    (@roman2099)


    Hola:

    Estoy teniendo problemas al ejecutar un formulario con acceso a funciones javascript. Me funciona en otros sitios como aquí https://zapatillas-trekking.com/pruebas/ pero no aquí https://de-senderismo.net/blog/calculadora-de-tiempos/.

    He desactivado plugins que creía que podían afectar pero nada, los raro es que solo falla en esa web.

    He intentado depurar con chrome y edge pero no consigo que funcione. Al pulsar cualquier botón no hace nada sin embargo en otras webs funciona bien.

    El error que da es:

    Uncaught TypeError: Cannot read property ‘value’ of undefined
    at getTime (wprmenu.js?ver=1.0:252)
    at CheckDist (wprmenu.js?ver=1.0:234)
    at CalcDist (wprmenu.js?ver=1.0:94)
    at HTMLInputElement.onclick (VM251:428)

    El código del formulario es:

    public function wp_calculator()
    {
    $calculator = ‘<form method=»POST»>
    <table cellspacing=»0″ cellpadding=»4″ cellspacing=1 border=»0″ align=»center» width=»420″>
    <!–Title Rows–>
    <tr><td bgcolor=»‘.$this->option(‘time_hd_color’).'» valign=»top» align=»center» colspan=»2″ ><FONT color=»‘.$this->option(‘time_hd_text_color’).'»><B style =»color:’.$this->option(‘time_hd_text_color’).'» >TIEMPO<span style=»font-weight: normal; display: block;»>Para Calcular tu Tiempo, Rellena tu Distancia y tu Ritmo, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr class= «time-bg» style=»background-image: url(‘.$this->option(‘time_bg’).’) !important; background-size: cover; background-position: center;» bgcolor=»‘.$this->option(‘time_bd_color’).'»>
    <TD class=»body-td» valign=»top» align=»center» style=»padding: 20px; «>
    <table>
    <tr>
    <td class=»smallText» align=»center»>HORAS</td>
    <td class=»smallText» align=»center»>MINUTOS</td>
    <td class=»smallText» align=»center»>SEGUNDOS</td>
    </tr>
    <tr>
    <td align=»center»><input type=»text» name=»thr» size=»2″ maxlength=»2″></td>
    <td align=»center»><input type=»text» name=»tmin» size=»2″ maxlength=»2″></td>
    <td align=»center»><input type=»text» name=»tsec» size=»5″ maxlength=»6″></td>
    </tr>
    </table>
    </td>
    <td style=»padding: 20px; » class=»body-td» align=»center» valign=»top»>Pulsa Aquí:<BR><INPUT type=»button» class=»pulldown» onClick=»var myform = document.forms[0]; CalcTime(myform)» value=»CALCULAR TIEMPO»>
    </td>
    </tr>
    <tr><td bgcolor=»‘.$this->option(‘distance_hd_color’).'» valign=»top» align=»center» colspan=»2″ ><FONT color=»#FFFFFF»><B style =»color:’.$this->option(‘distance_hd_text_color’).'»>DISTANCIA<span style=»font-weight: normal; display: block;»>Para Calcular tu Distancia, Rellena tu Tiempo y tu Ritmo, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr style=»background-image: url( ‘.$this->option(‘distance_bg’).’) !important; background-size: cover; background-position: center;» class= «distance-bg» bgcolor=»‘.$this->option(‘distance_bd_color’).'»>
    <TD style=»padding: 20px; » class=»body-td» valign=»top» align=»center»>
    <input type=»text» name=»dist» size=»7″ maxlength=»8″> <select name=»dunit» class=»pulldown»>
    <option value=»Mile»>Millas</option>
    <option value=»Kilometer» selected>Kilómetros</option>
    <option value=»Meter»>Metros</option>
    <option value=»Yard»>Yardas</option>
    </select><BR>
    O<BR>
    <select name=»event» onChange=»setDunit(document.forms[0])» class=»pulldown»>
    <option value=»special»>Selecciona Distancia</option>
    <option value=»Marathon»>Maratón</option>
    <option value=»Half-Marathon»>Media Maratón</option>
    <option value=»5K»>5K</option>
    <option value=»5M»>5M</option>
    <option value=»8K»>8K</option>
    <option value=»10K»>10K</option>
    <option value=»15K»>15K</option>
    <option value=»10M»>10M</option>
    <option value=»20K»>20K</option>
    <option value=»15M»>15M</option>
    <option value=»25K»>25K</option>
    <option value=»30K»>30K</option>
    <option value=»20M»>20M</option>
    </select>
    </td>
    <td style=»padding: 20px; » class=»body-td» align=»center» valign=»top»>Pulsa Aquí:<BR><INPUT type=»button» class=»pulldown» onClick=»var myform = document.forms[0]; CalcDist(myform)» value=»CALCULAR DISTANCIA»>
    </td>
    </tr>
    <tr><td bgcolor=»‘.$this->option(‘pace_hd_color’).'» valign=»top» align=»center» colspan=»2″ ><FONT color=»#FFFFFF»><B style =»color:’.$this->option(‘pace_hd_text_color’).'»>RITMO<span style=»font-weight: normal; display: block;»>Para Calcular tu Ritmo, Rellena tu Tiempo y tu Distancia, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr style=»background-image: url(‘.$this->option(‘pace_bg’).’) !important; background-size: cover; background-position: center;» class= «pace-bg» bgcolor=»‘.$this->option(‘pace_bd_color’).'»>
    <TD style=»padding: 20px; » class=»body-td» valign=»top» align=»center»>
    <table>
    <tr>
    <td align=»center» class=»smallText»>HORAS</td>
    <td colspan=»2″ align=»center» class=»smallText»>MIN SEG</td>
    </tr>
    <tr>
    <td align=»center»>
    <input type=»text» name=»phr» size=»2″ maxlength=»2″>
    </td>
    <td colspan=»2″ align=»center»>
    <input type=»text» name=»pmin» size=»2″ maxlength=»2″>
    <input type=»text» name=»psec» size=»5″ maxlength=»6″>
    </td>
    </tr>
    <tr>
    <td>Por</td>
    <td><select name=»punit» size=»1″ class=»pulldown»>
    <option value=»Mile»>Milla</option>
    <option value=»Kilometer» selected>Kilómetro</option>
    <option value=»Half Mile»>880 Yardas</option>
    <option value=»Quarter Mile»>440 Yardas</option>
    <option value=»Eigth Mile»>220 Yardas</option>
    <option value=»1500M»>1500 M</option>
    <option value=»800M»>800 M</option>
    <option value=»400M»>400 M</option>
    <option value=»200M»>200 M</option>
    <option value=»Meter»>Metros</option>
    <option value=»Yard»>Yardas</option>
    </select>
    </td>
    </tr>
    </table>
    </td>
    <td style=»padding: 20px; » class=»body-td» align=»center» valign=»top»>Pulsa Aquí:<BR><INPUT type=»button» class=»pulldown» onClick=»myform = document.forms[0]; CalcPace(myform)» value=»CALCULAR RITMO»>
    </td>
    </tr>
    <tr>
    <td colspan=3 align=»center»>
    <INPUT type=»button» class=»pulldown» onClick=»var myform = document.forms[0]; CalcSplits(myform)» value=»CALCULAR TIEMPOS DE PASO»> <INPUT type=»button» class=»pulldown» value=»LIMPIAR» onClick=»document.forms[0].reset()»>
    </td>
    </tr>
    </table>
    </form>’;
    return $calculator;

    Alguien tiene alguana idea de qué puede estar pasando, gracias.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Moderador LGrusin

    (@lgrusin)

    Por favor, usa el botón code cuando quieras poner código. No sabemos si lo que has puesto se muestra bien.

    Podrías probar poner el formulario fuera de la función.

    De todas formas lo vuelvo a escribir:

    public function wp_calculator()
    {
    $calculator = '<form method="POST">
    <table cellspacing="0" cellpadding="4" cellspacing=1 border="0" align="center" width="420">
    <!–Title Rows–>
    <tr><td bgcolor="'.$this->option('time_hd_color').'" valign="top" align="center" colspan="2" ><FONT color="'.$this->option('time_hd_text_color').'"><B style ="color:'.$this->option('time_hd_text_color').'" >TIEMPO<span style="font-weight: normal; display: block;">Para Calcular tu Tiempo, Rellena tu Distancia y tu Ritmo, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr class= "time-bg" style="background-image: url('.$this->option('time_bg').') !important; background-size: cover; background-position: center;" bgcolor="'.$this->option('time_bd_color').'">
    <TD class="body-td" valign="top" align="center" style="padding: 20px; ">
    <table>
    <tr>
    <td class="smallText" align="center">HORAS</td>
    <td class="smallText" align="center">MINUTOS</td>
    <td class="smallText" align="center">SEGUNDOS</td>
    </tr>
    <tr>
    <td align="center"><input type="text" name="thr" size="2" maxlength="2"></td>
    <td align="center"><input type="text" name="tmin" size="2" maxlength="2"></td>
    <td align="center"><input type="text" name="tsec" size="5" maxlength="6"></td>
    </tr>
    </table>
    </td>
    <td style="padding: 20px; " class="body-td" align="center" valign="top">Pulsa Aquí:<BR><INPUT type="button" class="pulldown" onClick="var myform = document.forms[0]; CalcTime(myform)" value="CALCULAR TIEMPO">
    </td>
    </tr>
    <tr><td bgcolor="'.$this->option('distance_hd_color').'" valign="top" align="center" colspan="2" ><FONT color="#FFFFFF"><B style ="color:'.$this->option('distance_hd_text_color').'">DISTANCIA<span style="font-weight: normal; display: block;">Para Calcular tu Distancia, Rellena tu Tiempo y tu Ritmo, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr style="background-image: url( '.$this->option('distance_bg').') !important; background-size: cover; background-position: center;" class= "distance-bg" bgcolor="'.$this->option('distance_bd_color').'">
    <TD style="padding: 20px; " class="body-td" valign="top" align="center">
    <input type="text" name="dist" size="7" maxlength="8"> <select name="dunit" class="pulldown">
    <option value="Mile">Millas</option>
    <option value="Kilometer" selected>Kilómetros</option>
    <option value="Meter">Metros</option>
    <option value="Yard">Yardas</option>
    </select><BR>
    O<BR>
    <select name="event" onChange="setDunit(document.forms[0])" class="pulldown">
    <option value="special">Selecciona Distancia</option>
    <option value="Marathon">Maratón</option>
    <option value="Half-Marathon">Media Maratón</option>
    <option value="5K">5K</option>
    <option value="5M">5M</option>
    <option value="8K">8K</option>
    <option value="10K">10K</option>
    <option value="15K">15K</option>
    <option value="10M">10M</option>
    <option value="20K">20K</option>
    <option value="15M">15M</option>
    <option value="25K">25K</option>
    <option value="30K">30K</option>
    <option value="20M">20M</option>
    </select>
    </td>
    <td style="padding: 20px; " class="body-td" align="center" valign="top">Pulsa Aquí:<BR><INPUT type="button" class="pulldown" onClick="var myform = document.forms[0]; CalcDist(myform)" value="CALCULAR DISTANCIA">
    </td>
    </tr>
    <tr><td bgcolor="'.$this->option('pace_hd_color').'" valign="top" align="center" colspan="2" ><FONT color="#FFFFFF"><B style ="color:'.$this->option('pace_hd_text_color').'">RITMO<span style="font-weight: normal; display: block;">Para Calcular tu Ritmo, Rellena tu Tiempo y tu Distancia, Luego Pulsa el Botón</span></B></FONT></td></tr>
    <tr style="background-image: url('.$this->option('pace_bg').') !important; background-size: cover; background-position: center;" class= "pace-bg" bgcolor="'.$this->option('pace_bd_color').'">
    <TD style="padding: 20px; " class="body-td" valign="top" align="center">
    <table>
    <tr>
    <td align="center" class="smallText">HORAS</td>
    <td colspan="2" align="center" class="smallText">MIN SEG</td>
    </tr>
    <tr>
    <td align="center">
    <input type="text" name="phr" size="2" maxlength="2">
    </td>
    <td colspan="2" align="center">
    <input type="text" name="pmin" size="2" maxlength="2">
    <input type="text" name="psec" size="5" maxlength="6">
    </td>
    </tr>
    <tr>
    <td>Por</td>
    <td><select name="punit" size="1" class="pulldown">
    <option value="Mile">Milla</option>
    <option value="Kilometer" selected>Kilómetro</option>
    <option value="Half Mile">880 Yardas</option>
    <option value="Quarter Mile">440 Yardas</option>
    <option value="Eigth Mile">220 Yardas</option>
    <option value="1500M">1500 M</option>
    <option value="800M">800 M</option>
    <option value="400M">400 M</option>
    <option value="200M">200 M</option>
    <option value="Meter">Metros</option>
    <option value="Yard">Yardas</option>
    </select>
    </td>
    </tr>
    </table>
    </td>
    <td style="padding: 20px; " class="body-td" align="center" valign="top">Pulsa Aquí:<BR><INPUT type="button" class="pulldown" onClick="myform = document.forms[0]; CalcPace(myform)" value="CALCULAR RITMO">
    </td>
    </tr>
    <tr>
    <td colspan=3 align="center">
    <INPUT type="button" class="pulldown" onClick="var myform = document.forms[0]; CalcSplits(myform)" value="CALCULAR TIEMPOS DE PASO"> <INPUT type="button" class="pulldown" value="LIMPIAR" onClick="document.forms[0].reset()">
    </td>
    </tr>
    </table>
    </form>';
    return $calculator;
    Iniciador del debate roman2099

    (@roman2099)

    Hola:

    Ok, disculpa por lo del código y gracias.

    Lo intento modificar como comentas.

    Saludos.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Uncaught TypeError: Cannot read property ‘value’ of undefined’ está cerrado a nuevas respuestas.