Question

我在aminiproyect工作。我必须使用Web组件修改输入。我已经修改了输入（谈论风格）但我不能做的行为。当我想获得输入文本中正在写入的值时，它返回我未定义，我不知道为什么...我有人可以帮助我，或者可以推荐给我一本好书PDF因为这对我来说是新的。< / p>

这就是我所拥有的：当我调用getValue函数时，它会让我感到不安，我不知道是不是。

HTML：

    <input-mejorado></input-mejorado>
    <center><button id="verify">Verificar input</button></center>


    <script type="text/javascript">

    class inputVerification extends HTMLElement{

        constructor(){
            super();
            //this.addEventListener('blur',gettingValues);
        }

        connectedCallback(){ //cuando se mete en el dom, se inicia

            var shadowFuncion = this.attachShadow({mode: 'open'}); 

                shadowFuncion.innerHTML =   
                `<div>
                <center> 
                <style>
                    input{
                        background-color: orange;
                        font-size: 150%;
                    }
                </style>

                <input type="text">
                <br>Hola, este es un webComponent modificado!<br>
                </center>
                </div>`
                ;

                this.addBlurListener();
        }

        addBlurListener() {
            this.addEventListener('blur', e=>{
                this.getValue();
                //alert("holas");
            });
        }

        getValue(){
            var valor = document.querySelector('input');
            if(valor==5){
                alert("Si agarra el numero");
            }else{
                alert("no hay vida");
            }
        }


    } //final


        window.customElements.define('input-mejorado',inputVerification);
        //document.createElement('input','input-mejorado');

</script>

Answer 1

您的代码有两个主要问题。

您正在调用文档querySelector方法，而不是shadow元素。
```
let valor = document.querySelector('input');
```
这将检索文档上的第一个输入，但不搜索自定义组件的影子DOM，也不会看到您想要的输入。
```
let valor = this.shadowRoot.querySelector('input');
```
MDN shadowRoot这将使您获得shadowRoot的第一个输入，在您的情况下，这是唯一的输入。尽管如果您切换到封闭模式元素，则访问shadowRoot的方法会稍有不同，因此该代码将无法正常工作。
您不会从获取的输入中返回或什至完全检索该值。我在上面所做的修改仍然只能为您提供元素，您仍然需要从中提取实际值。
```
let valor = this.shadowRoot.querySelector('input').value;
```
这最终会从您选择的元素中获取值，但是除非您也返回该值，否则无法从getValue函数访问该值。

这是我建议的更改的getValue函数。

getValue(){
    const valor = this.shadowRoot.querySelector('input').value;
    if (valor==5) {
        alert("Si agarra el numero");
    } else {
        alert("no hay vida");
    }
    return valor;
}

除此之外，您还在shadowRoot中使用不推荐使用的html。 center element

Web组件javascript ecmascript6

1 个答案: