Невозможно получить пользовательский ввод из выпадающего списка

Question

Я пытался получить пользовательский ввод из простого выпадающего списка, чтобы заполнить его тегом <p>, но, похоже, не могу это сделать.

Ниже приведен мой javascript:

<script>
    function changeText() {
        var textDDL = document.getElementById("DDL1");
        var text = textDDL.options[textDDL.selectedIndex].value;

        var test = document.getElementById("test");
        test.innerHTML = text;
     }
</script>

Ниже приведен мой HTML-код:

<p class="first">
                    <label for="first">From</label>                     
                    <input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
                    <datalist id="countriesDL">
                        <option value="Afghanistan" class="form-control"></option>
                        <option value="Albania"></option>
                        <option value="Algeria"></option>
                        <option value="Aland Islands"></option>
                        <option value="American Samoa"></option>
                        <option value="Anguilla"></option>
                        <option value="Andorra"></option>
                        <option value="Angola"></option>
                        <option value="Antilles - Netherlands"></option>
                        <option value="Antigua and Barbuda"></option>
                        <option value="Antarctica"></option>
                        <option value="Argentina"></option>
                        <option value="Armenia"></option>
                        <option value="Australia"></option>
                        <option value="Taiwan"></option>
                    </datalist>

                </p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>

Коды будут вызываться нажатием кнопки.Я попытался перезагрузить страницу после нажатия кнопки, чтобы посмотреть, применяет ли он пользовательский ввод, я попытался вызвать функцию после нажатия кнопки.Кажется, не вижу, что с ним не так.

Answer 1

[ОБНОВЛЕНО] Это то, что вы пытаетесь?

function changeText() {
    var textDDL = document.getElementById("DDL1");
    var text = textDDL.value;

    var test = document.getElementById("text");
    test.innerHTML = text;
 }

<p class="first">
                    <label for="first">From</label>                     
                    <input list="countriesDL" name="country" class="form-control" type="text" id="DDL1">
                    <datalist id="countriesDL">
                        <option value="Afghanistan" class="form-control"></option>
                        <option value="Albania"></option>
                        <option value="Algeria"></option>
                        <option value="Aland Islands"></option>
                        <option value="American Samoa"></option>
                        <option value="Anguilla"></option>
                        <option value="Andorra"></option>
                        <option value="Angola"></option>
                        <option value="Antilles - Netherlands"></option>
                        <option value="Antigua and Barbuda"></option>
                        <option value="Antarctica"></option>
                        <option value="Argentina"></option>
                        <option value="Armenia"></option>
                        <option value="Australia"></option>
                        <option value="Taiwan"></option>
                    </datalist>

                </p>
<button id="info2Btn" type="button" class="btn btn-warning leggo" style="color:black;" onClick="changeText()">Let's Go</button>
<p id="text"></p>

Answer 2

Попробуйте

function changeText() {
   document.getElementById("test").innerHTML = document.getElementById("DDL1").value;
}