Javascript не может изменить входное значение - PullRequest
Новая
       24

Javascript не может изменить входное значение

0 голосов
/ 08 октября 2019

Я пытаюсь установить случайное число в качестве значения для ons-input (signup_txtCodigo), но всякий раз, когда я пытаюсь нажать на страницу, оно просто показывает мне предупреждение, которое я ставлю, чтобы проверить случайное и остается там. Это шаблон страницы: 

<!--External user register-->
        <template id="signup.html">
            <ons-page id="login-page" modifier="full_bg">
                <ons-toolbar modifier="transparent">
                    <div class="center" style="font-size:150%;color:#f0f0f0">Estacionamiento UdeG</div>
                    <div class="left"><ons-back-button>Volver</ons-back-button></div>
                </ons-toolbar>
                <div align="center">
                    <br><img src="https://quimicabasicacucei.files.wordpress.com/2013/02/logo-udg.png?w=316" alt="logo" height=250px><br>
                    <p style="color:#f0f0f0">Registrar usuario</p>
                    <table>
                        <tr>
                            <td style="color:#f0f0f0">Código:</td>
                            <td><div contenteditable><ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" readonly></ons-input></div></td>  //this is the input I'm trying to change
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Nombre:</td>
                            <td><ons-input input-id="signup_txtNombre" type="text" modifier="underbar" placeholder="Nombre"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Placa:</td>
                            <td><ons-input input-id="signup_txtPlaca" type="text" modifier="underbar" placeholder="Ej. A1B-2C3" maxlength="7"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Teléfono:</td>
                            <td><ons-input input-id="signup_txtTelefono" type="text" modifier="underbar" placeholder="Teléfono" maxlength="10"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Contraseña:</td>
                            <td><ons-input input-id="signup_txtPassword" type="password" modifier="underbar" placeholder="Contraseña" maxlength="10"></ons-input></td>
                        </tr>
                    </table><br>
                    <ons-button onclick="signup()" modifier="cta">Enviar</ons-button>
                    <ons-button onclick="cleanSignUp()" >Limpiar</ons-button><br><br>
                </div>
            </ons-page>
        </template>

Это функция, которая должна присвоить значение вводу и нажать на страницу: 

//load signup page
        function externalUserPage(){
            var random = Math.floor((Math.random() * 999999999) + 111111111);
            alert(random);
            document.getElementById("signup_txtCodigo").value = random
            document.querySelector('#myNavigator').pushPage('signup.html', {data: {title: 'signup'}});
        }

Заранее спасибо

Ответы [ 4 ]

1 голос
/ 08 октября 2019

Вы используете Элемент шаблона содержимого , и вам необходимо удалить dot в id.

, поэтому измените 

<template id="signup.html">

на 

<template id="signuphtml">

вы можете получить доступ к содержимому шаблона следующим образом 

var content = document.querySelector('template#signuphtml').content;

для доступа к вашему элементу используйте document.importNode 

var clone = document.importNode(content, true);
var signup_txtCodigo = clone.querySelector("[input-id='signup_txtCodigo']");

теперь вы можете заполнить его, используя свойство textContent

здесь иллюстрация 

//load signup page
        (function externalUserPage(){
            var random = Math.floor((Math.random() * 999999999) + 111111111);
            alert(random);
      
            var content = document.querySelector('template#signuphtml').content;
    
var clone = document.importNode(content, true);
    var signup_txtCodigo = clone.querySelector("[input-id='signup_txtCodigo']");
    signup_txtCodigo.innerHTML = random;
  //document.getElementById("signup_txtCodigo").value = random
          console.log(signup_txtCodigo);  document.querySelector('#myNavigator').pushPage('signup.html', {data: {title: 'signup'}});
        })();
<!--External user register-->
        <template id="signuphtml">
            <ons-page id="login-page" modifier="full_bg">
                <ons-toolbar modifier="transparent">
                    <div class="center" style="font-size:150%;color:#f0f0f0">Estacionamiento UdeG</div>
                    <div class="left"><ons-back-button>Volver</ons-back-button></div>
                </ons-toolbar>
                <div align="center">
                    <br><img src="https://quimicabasicacucei.files.wordpress.com/2013/02/logo-udg.png?w=316" alt="logo" height=250px><br>
                    <p style="color:#f0f0f0">Registrar usuario</p>
                    <table>
                        <tr>
                            <td style="color:#f0f0f0">Código:</td>
                            <td><div contenteditable><ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" readonly></ons-input></div></td>  //this is the input I'm trying to change
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Nombre:</td>
                            <td><ons-input input-id="signup_txtNombre" type="text" modifier="underbar" placeholder="Nombre"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Placa:</td>
                            <td><ons-input input-id="signup_txtPlaca" type="text" modifier="underbar" placeholder="Ej. A1B-2C3" maxlength="7"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Teléfono:</td>
                            <td><ons-input input-id="signup_txtTelefono" type="text" modifier="underbar" placeholder="Teléfono" maxlength="10"></ons-input></td>
                        </tr>
                        <tr>
                            <td style="color:#f0f0f0">Contraseña:</td>
                            <td><ons-input input-id="signup_txtPassword" type="password" modifier="underbar" placeholder="Contraseña" maxlength="10"></ons-input></td>
                        </tr>
                    </table><br>
                    <ons-button onclick="signup()" modifier="cta">Enviar</ons-button>
                    <ons-button onclick="cleanSignUp()" >Limpiar</ons-button><br><br>
                </div>
            </ons-page>
        </template>
0 голосов
/ 08 октября 2019

Просто измените input-id="signup_txtCodigo" на id="signup_txtCodigo"

Я сделал быстрый поиск в Google, но из того, что я могу собрать, input-id не является допустимым атрибутом элемента OnSen, поэтому вы не можете выбрать его по Idобычными средствами JavaScript.

0 голосов
/ 08 октября 2019

Чтобы присвоить значение этому входу, проверьте свою функцию, если она получила вызов или вы записали ее в document.ready.

для моей идеи этот пример должен работать: 

$( document ).ready(function() {
     var random = Math.floor((Math.random() * 999999999) + 111111111);
     document.getElementById("signup_txtCodigo").value = random;
});

Ссылочная ссылка: Входное значение текста Свойство

0 голосов
/ 08 октября 2019

вы не можете изменить поле, помеченное как readonly, вы должны использовать disabled

<ons-input input-id="signup_txtCodigo" type="text" modifier="underbar" disabled></ons-input>
...