javascript - (DOM 问题)不返回任何内容

Question

我是 JavaScript 新手，当用户单击 id 的按钮时，我尝试操作“text”类的 HTML h2 元素的值” Push" 并将其更改为输入 class="inputV" 的值，但是我注意到，当输入字段中没有值时，整个 block 就会消失，所以我尝试返回如果输入不正确，则返回不同的值!那么我该如何出去做这件事呢!这就是我到目前为止所尝试过的。

    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

一旦为按钮设置了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>