Почему я не могу получить текстовое значение из поля ввода?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Итак, я пытался получить текст из поля ввода и установить его в качестве текста заголовка. Но я не мог этого сделать. Я боролся с HTML DOM. Спасибо.

 document.getElementById('button').onclick = function(){
    document.getElementById('header1').innerHTML = 'CHANGED';
}

document.getElementById('button2').onclick = function(){
    document.getElementById('input').value = document.getElementById('header1').innerHTML;
}

    <div>
        <h1 id = 'header1'>HTML DOM</h1>
        <button id = 'button'>Click</button>
        <script src = 'app.js'></script>
    </div>
    <div>
        <input type="text" id = 'input'>
        <button id = 'button2'>OK</button>
    </div>

1. Кажется, это работает?

2. Я думаю, что он работает нормально только

3. document.getElementById(‘input’) — я не вижу ни одного элемента на странице с id=»input» есть элемент ввода — так что вы, вероятно, захотите либо присвоить вводу атрибут id, либо использовать getElementsByTagName(«input»)[0]

4. В вашем button2 событии click вы присваиваете заголовок innerHTML своему вводу. Вам нужно присвоить значение ввода заголовку innerHTML

Ответ №1:

Вы должны изменить функцию на это:

 document.getElementById('button2').onclick = function(){
  document.getElementById('header1').innerHTML = document.getElementById('input').value
};

Ответ №2:

Если вы хотите использовать текст, указанный во входных данных, и установить его в качестве заголовка, вам нужно отменить свое утверждение

 document.getElementById('header1').innerText = document.getElementById('input').value;

Кстати. если ваш ввод должен обрабатываться как просто текст, тогда используйте свойство .innerText, а не .innerHTML

Ответ №3:

Вероятно, вы поменяли местами назначение во второй функции. Попробуйте это:

 document.getElementById('button2').onclick = function(){
    document.getElementById('header1').innerHTML = document.getElementById('input').value;

Ответ №4:

это тоже должно сработать

 document.getElementById('button2').onclick = function(){
  document.getElementById('header1').innerText=document.getElementById('input').value

Ответ №5:

Если я вас понял, посмотрите фрагмент моего кода

 //function on button2 click event
document.getElementById('button2').onclick = function(){

    var input = document.getElementById('input').value;
    document.getElementById('header1').innerHTML=input;
}

 <p>From input to <b>header</b> on click button "OK"</p>  
  
  <div>
        <h1 id = 'header1'>HTML DOM</h1>
    </div>
    <div>
        <input type="text" id = 'input'>
        <button id = 'button2'>OK</button>
    </div>

1. Спасибо за ваш ответ. Когда я увидел, что ваш код работает, я попытался написать код сам, поэтому в своем редакторе кода я прокомментировал ваш код и написал точно такой же код, как у вас, и он по какой-то причине не сработал. Я сейчас очень злюсь на Javascript. Но большое спасибо! Спасибо.

2. РЕДАКТИРОВАТЬ: я понял, что написал «ondclick» вместо «onclick». В наши дни я так беспечен.

3. Иногда это случается, вы не замечаете таких мелочей, но они играют важную роль. Удачи в будущем!