（DOM 问题）不返回任何内容

Question

我是 JavaScript 新手，当用户单击 ID 为"push"的按钮并将其更改为 input class="inputV"的值时，我试图操作类为“text”的 HTML h2元素的值class="inputV" ，但是我注意到当输入字段中没有值时，整个块就会消失，所以如果输入不正确，我试图返回一个不同的值！ 那我该怎么做呢！ 这就是我到目前为止所尝试的。

    function input(){
    var inputValue= document.getElementById('inputV').value;
    var text = document.querySelector('.text').textContent;

    if (inputValue){
            text = inputValue;
            }else{
                text = 'Null';
        }
        return text;
    };

    document.getElementById('push').addEventListener('click',input);



    <div class=container><h1>JavaScript OOP</h1>
            <div>
                <form class="input">
                    <input id="inputV" type="text" name="name" placeholder="Enter your Name">
                </form>
            </div>
            <div><h2 class="text">Results</h2></div>
            <button id="push" value="Sign me in" onclick="input()">Sign me in</button>
        </div>

Answer 1

不需要初始化text ，只需声明即可。
将您的return text替换为<h2>分配，如下所示

function input(){
    var inputValue= document.getElementById('inputV').value;
    //var text = document.querySelector('.text').textContent;
    var text;

    if (inputValue){
        text = inputValue;
    }
    else{
        text = 'Null';
    }
    // return text;
    document.querySelector('.text').textContent = text;
}

document.getElementById('push').addEventListener('click',input);

Answer 2

为按钮设置onclick="input()" ，您无需额外定义事件侦听器。 你也可以让函数体更短一点

 function input(){ var inputValue= document.getElementById('inputV').value; var text = document.querySelector('.text'); text.textContent = inputValue || 'Null'; }; // document.getElementById('push').addEventListener('click',input);

 <div class=container><h1 class="text">JavaScript OOP</h1> <div> <form class="input"> <input id="inputV" type="text" name="name" placeholder="Enter your Name"> </form> </div> <div><h2 class="text">Results</h2></div> <button id="push" value="Sign me in" onclick="input()">Sign me in</button> </div>