(Проблема DOM) ничего не возвращая - PullRequest
0 голосов
/ 27 февраля 2020

Я новичок в JavaScript, и я пытался манипулировать значением элемента HTML h2 с классом "text", когда пользователи нажимают на кнопку с идентификатором "push" и меняют это к значению ввода class="inputV", однако я заметил, что когда нет значения в поле ввода, весь блок просто исчезает, поэтому я попытался вернуть другое значение, если ввод не соответствует истине! так как же я go об этом! это то, что я пробовал до сих пор.

    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>

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

После того, как вы установите 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>
1 голос
/ 27 февраля 2020

Инициализация 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...