Call javascript functionality from html

Question

Call javascript functionality from html

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I need to call the editProduct () function from a button in the html. What I did was add it to the onclick="editProduct ()" button. This is the javascript code:

const API = (function() {
  /**
   * Obtiene una orden desde el backend
   *
   * @param {Number} orderId id de la orden
   */
  function getOrder(orderId) {
    return fetch('/order/1')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos desde el backend
   *
   */
  function getProducts() {
    return fetch('/product')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos pertenecientes a una orden desde el backend
   *
   */
  function getOrderProduct(orderId, productId) {
    return fetch('/order/${ orderId }/product/${ productId }')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Edita un producto de una orden
   *
   */
  function editProduct(orderId, productId, quantity, product) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch('/order/${ orderId }/product/${ productId }', {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  /**
   * Agrega un producto a una orden
   **/
  function addProduct(orderId, product, quantity) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch('/order/${ orderId }/product', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  return {
    getOrder,
    getProducts,
    getOrderProduct,
    editProduct,
    addProduct
  }
})()

<button onclick="editProduct()">Botón</button>

I further clarify that the file is in static / js / api.js

javascript html

asked by Luis 01.05.2018 в 15:31

source

3 answers

Applying Thread Race in an interface (it does not refresh) Hide and show controls in ASP.Net C #

score 2 · Answer 1

The editProduct() method is private to the anomin% (function(){ ... }) function but the onclick event expects it to be public. You have to make the function public so that the onclick can access it:

cons API = (function(){
  window.editProduct = function(){
    //...
  }
});

Although I understand that what you want is to be able to access the function in the form API.editProduct() . For that you will have to create the way you declare using an object:

var API = {
  editProduct : function(){
    //...
 }
};

And then you can do the following:

<button onclick="API.editProduct()">Editar producto</button>

score 0 · Answer 2

The problem is that you are not defining the function editProduct itself, but an object ( API ) that contains various functions (being editProduct one of them). Then to access the different functions, you would not call them directly doing onclick="editProduct()" but you would have to access the function of the object / API that you created: onclick="API.editProduct()"

With that change, it will work:

const API = (function() {
  /**
   * Obtiene una orden desde el backend
   *
   * @param {Number} orderId id de la orden
   */
  function getOrder(orderId) {
    return fetch('/order/1')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos desde el backend
   *
   */
  function getProducts() {
    return fetch('/product')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Obtiene todos los productos pertenecientes a una orden desde el backend
   *
   */
  function getOrderProduct(orderId, productId) {
    return fetch('/order/${ orderId }/product/${ productId }')
      .then(function toJson(r) {
        return r.json();
      });
  }

  /**
   * Edita un producto de una orden
   *
   */
  function editProduct(orderId, productId, quantity, product) {
    console.log("Dentro de EditProduct");
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch('/order/${ orderId }/product/${ productId }', {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  /**
   * Agrega un producto a una orden
   **/
  function addProduct(orderId, product, quantity) {
    const data = JSON.stringify({
      quantity: quantity,
      product: product
    })

    return fetch('/order/${ orderId }/product', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: data
    }).then(function toJson(r) {
      return r.json();
    });
  }

  return {
    getOrder,
    getProducts,
    getOrderProduct,
    editProduct,
    addProduct
  }
})()

<button onclick="API.editProduct()">Botón</button>

score 0 · Answer 3

0

I could not make it work. I understand that the file api.js is used by index.js to load a product for example. But I can not edit a loaded one. This is the code: link

answered by 01.05.2018 в 17:16