document.getElementById в коде amp-script, предоставляющем данные элемента по-разному - PullRequest
1 голос
/ 07 июня 2019

Я использую AMP для разработки своего сайта. В этом я использую amp-скрипт. Когда я использую document.getElementById, это дает данные элемента по-другому. Я ищу некоторые свойства, такие как значение и т. Д. В нем. Но не могут те. Смотрите скриншот ниже, чтобы посмотреть на содержание.

element contents

Пожалуйста, помогите мне решить эту проблему. Спасибо ...

РЕДАКТИРОВАТЬ: Добавлен фрагмент кода

HTML:

<form action="click" target="_blank" name="contact_form" id="contact_form" class="contact-form__block">
                <div class="form__group">
                    <label for="message" class="form__label message_label">The idea that is brewing in your mind?
                        *</label>
                    <textarea name="message" id="form__textarea" class="form__textarea"></textarea>
                </div>
                <div class="form__group">
                    <label for="name" class="form__label name_label">Name </label>
                    <input type="text" name="name" id="form__name" class="form__input name" value="" autocomplete="off">
                </div>
                <div class="form__groups">
                    <div class="form__group">
                        <label for="phone" class="form__label phone_label">Phone Number </label>
                        <input type="text" name="phone" id="form__phone" class="form__input phone" value=""
                            autocomplete="off">
                        <!-- error message start -->
                        <!-- <div class="form__error e_mail">Please enter all required details.</div> -->
                        <!-- error message end -->
                    </div>
                    <div class="form__group">
                        <label for="mail" class="form__label email_label">Email *</label>
                        <input type="text" name="mail" id="form__mail" class="form__input mail">
                    </div>
                </div>
                <div class="form__group">
                    <div class="form-button__block">
                        <button type="button" name="submit" class="form__submit" id="form-submit">
                            <div class="arrow__btn-link-text">Let's Connect</div>
                            <amp-img src="stroke-arrow-right.svg" height="1" width="1"
                                alt="arrow right icon" class="arrow__btn-icon">
                        </button>
                        <!-- <div class="button--border"></div> -->
                    </div>
                    <div class="error_box">
                        <span class="error_message"></span>
                    </div>
                </div>
            </form>

JS:

var form = document.getElementById("form-submit"), msg;
form.addEventListener("click", function(event) {
    event.preventDefault();
    if (document.getElementById('form__textarea').value == '') {
        msg = false;
    } else {
        msg = true;
    }
    if (document.getElementById('form__mail').value == '') {
        email = false;
    } else {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var validEmail = emailReg.test(document.getElementById('form__mail').value);
        if (!validEmail) {
            email = false;
        } else {
            email = true;
        }
    }
    if (document.getElementById('form__phone').value == '') {
        phone = true;
        document.getElementById('form__phone').value = "";
    } else {
        var phoneReg = /^([0-9]{10})|(\([0-9]{3}\)\s+[0-9]{3}\-[0-9]{4})/;
        var validPhone = phoneReg.test(document.getElementById('form__phone').value);
        if (!validPhone) {
            phone = false;
        } else {
            phone = true;
        }
    }
    if (document.getElementById('form__name').value == '') {
        document.getElementById('form__name').value = "";
    } else {
        name = true;
    }
    if (!msg || !email || !phone) {
        console.log("Error in formmmmmmmmmmmmm");
        return false;
    } else {
        console.log("valid formmmmmmmmmmmmmmmmmmmmmm");
    }
});
...