Использование функции onclick innerhtml - PullRequest
Новая
       36

Использование функции onclick innerhtml

0 голосов
/ 09 ноября 2018

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

<script type="text/javascript">
function myfunction() {
  var login = document.getElementById('opt').innerHTML;
  document.getElementById('champs1').innerHTML = login;
}
</script>


<div class="row">
    <select>
        <?php foreach ($page->items as $user): ?>
            <option id="opt" onclick="myfunction()"><?php echo $user->getLogin() ?></option>
        <?php endforeach; ?>
    </select>
    <h3 id="champs1"></h3>
</div>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Вы не можете привязать события к элементу <option>, используйте onchange для элемента <select>. https://www.w3schools.com/jsref/event_onchange.asp

<div class="row">
    <select id="opt" onchange="myfunction()">
        <?php foreach ($page->items as $user): ?>
            <option value="<?php echo $user->getLogin() ?>"><?php echo $user->getLogin() ?></option>
        <?php endforeach; ?>
    </select>
    <h3 id="champs1"></h3>
</div>

<script type="text/javascript">
    function myfunction() {
        // get the selected option value
        const selectedOption = document.getElementById("opt").value

        // display the value to UI
        document.getElementById('champs1').innerHTML = selectedOption
    }
</script>
0 голосов
/ 09 ноября 2018

Есть несколько вопросов:

  1. Вы не можете повторить id. Теги <option> всегда будут иметь одинаковые значения id для всех.
  2. Нет события click для <option>. Вы должны использовать change событие для <select>.

Может сработать следующее. 

<select id="opt" onchange="myfunction()">
    <?php foreach ($page->items as $user): ?>
        <option><?php echo $user->getLogin() ?></option>
    <?php endforeach; ?>
</select>

И изменить сценарий на: 

<script type="text/javascript">
function myfunction() {
  var login = document.getElementById('opt');
  var opt = login.options[login.selectedIndex];
  document.getElementById('champs1').innerHTML = opt.innerHTML;
}
</script>

Отрывок: 

function myfunction() {
  var login = document.getElementById('opt');
  var opt = login.options[login.selectedIndex];
  document.getElementById('champs1').innerHTML = opt.innerHTML;
}
<select id="opt" onchange="myfunction()">
  <option>One</option>
  <option>Two</option>
</select>
<div id="champs1"></div>
...