Как создать кнопку для изменения оповещения с помощью JQuery и JavaScript?

Question

Я хочу создать кнопку выбора. Есть два варианта: дата поездки и дата выдачи. Поэтому, когда пользователь нажимает на пройденную дату. Там будет оповещение о дате поездки и наоборот к дате выдачи. Я уже создал функцию внутри кнопки выбора, но предупреждение все еще не работает?

function myFunction() {
  document.getElementById("myInput").alert("try");
}

function myFunction1() {
  document.getElementById("myButton").alert("fefetry");
}

<select class="form-control" name="insurance_id">
  <option value="" id="myInput" onclick="myFunction()">Travel Date</option>
  <option value="" id="myButton" onclick="myFunction1()">Issued Date</option>
</select>

Answer 1

Вы можете выполнить рефакторинг, прослушивая событие на change из select[name=insurance_id], затем alert, соответственно, как указано ниже

$("select[name=insurance_id]").on("change", function(){
    alert($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
        <option value="Travel Date" >Travel Date</option>
        <option value="Issued Date" >Issued Date</option>
   </select>

Answer 2

Вы не используете onclick на options, но onchange слушатель при выборе.

Предполагается, что вы не используете options value, вы можете использовать их в качестве заполнителя оповещения:

<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].value);">
  <option value="try" id="myInput">Travel Date</option>
  <option value="fefetry" id="myButton">Issued Date</option>
</select>

Кроме того, вы можете использовать data_attributes и dataset property, чтобы получить его:

<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].dataset.alert);">
  <option data-alert="try" value="" id="myInput">Travel Date</option>
  <option data-alert="fefetry" value="" id="myButton">Issued Date</option>
</select>

Answer 3

alert - это глобальный Window метод, но вы пытаетесь получить доступ к нему на элементе.

Вы можете попробовать что-то вроде следующего:

<select class="form-control" name="insurance_id"  onchange="myFunction(this)">
  <option value="" id="myInput">Travel Date</option>
  <option value="" id="myButton">Issued Date</option>
</select>

<script>
  function myFunction(sel) {
    var text = sel.options[sel.selectedIndex].text
    alert(text);
  }
  myFunction(document.querySelector('select'));
</script>

Использование jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
  <option value="" id="myInput">Travel Date</option>
  <option value="" id="myButton">Issued Date</option>
</select>

<script>
  $('select').change(function(){
    alert($(this).find('option:selected').text());
  }).trigger('change');
</script>

Answer 4

Измените свой код javascipt на

<script>
function myFunction() {
  alert("try");
}

function myFunction1() {
  alert("fefetry");
}
</script>

Answer 5

Вам не нужен document.getElementByID (), поскольку вы назначили обработчик щелчка в теге HTML.