Нужна помощь в преобразовании функции jQuery в JavaScript?

Question

Я обновляю продукт, я могу получить информацию о продукте, предварительно заполнить форму обновления и обновить информацию о продукте с помощью jQuery, но я хочу использовать JavaScript.Как мне преобразовать этот код jQuery в JavaScript?

Я слежу за онлайн-уроком, и человек использует jQuery, что здорово, но я хочу посмотреть, как сделать тот же метод с использованием Javascript.

Код Javascript:

$(document).on('pagebeforeshow', '#updatedialog', function() {
  $('#newName').val(currentProduct.name);
  $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
  var newName = $('#newName').val();
  var newQuantity = $('#newQuantity').val();
  productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

Форма обновления HTML

<form>
  <div class="ui-field-contain">
    <label for="newName"
           class="ui-hidden- accessible">Name</label>
    <input type="text"
           id="newName"
           data-clear-btn="true"
           placeholder="New Name"/>
    <br/>

    <label for="newQuantity"
           class="ui-hidden-accessible">Quantity</label>
    <input type="number" 
           name="number" 
           pattern="[0-9}"
           id="newQuantity" 
           value="" 
           data-clear-btn="true" 
           placeholder="New Quantity"/>
    <br/>
    <button class="ui-btn ui-icon-plus ui-btn-icon-left"
            id="btnupdate"
            onclick="updateProduct()">
      Update
    </button>
  </div>
</form>

Форма обновления должна заполняться информацией о продукте, который уже был введен, а затем обновлять изменения, внесенные вполя и сохранить его как новый объект.Я могу сделать это в jQuery, но я хочу помочь с этим в Javascript.

Answer 1

вы можете получить значения элемента по id, используя документ, попробуйте следующее

function updateProduct(){
var newName=document.getElementById("newName").value; 
var newQuantity=document.getElementById("newQuantity ").value; 
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

Answer 2

Похоже, все, что вы в настоящее время делаете с jquery, это получение значений входных элементов по их ID.Вы можете сделать это с помощью javascript, выбрав элемент формы по ID и получив свойство value.

val value = document.getElementById("elemID").value;

Ваш код должен выглядеть следующим образом

 function updateProduct(){
 var newName= document.getElementById("newName").value;
 var newQuantity = document.getElementById("newQuantity").value;
 productHandler.updateProduct(currentProduct.id, newName, newQuantity);
  }