amp脚本代码中的document.getElementById以不同的方式提供元素数据

Question

我正在使用AMP开发我的网站。在这种情况下，我正在使用amp-script。当我使用document.getElementById时，它给元素数据的方式有所不同。我正在寻找一些属性，如价值等。但是，不能。请参见下面的屏幕截图以查看内容。

请帮助我解决此问题。 谢谢...

编辑：添加了代码段

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