Usar variable en otra función con javascript – javascript html app

Pregunta:


Primero que todo voy a dejar un enlace donde pueden ver el ejemplo funcionando de manera completa.
Enlace a la pagina AQUI

introducir la descripción de la imagen aquí

El valor elegido en esta lista. determina cual valor del power se va mostrar.

introducir la descripción de la imagen aquí

Tengo un input de tipo range que uso para calcular el peso de una persona:

 <div class="item-input">
              <div class="range-slider">
                <h2  id='Peso1' >Peso:</h2>  
                  <input type="range" oninput="mouseDown(); "  min="3.5" max="50" value="12.5" step ="0.50" >
                </div>
          </div>

Entonces tengo esta función que me devuelve el dato:

function mouseDown() {
    var el = document.getElementById('Articulo1');
    el.addEventListener('input', function(e) {
        document.getElementById('Peso1').innerHTML = (e.target.value);
    });
}

Lo que necesito es poder multiplicar el valor e por el valor power

Pero no se como hacerlo.

cars: [
            {
                vendor: 'Volkswagen',
                model: 'Passat',
                power: 152,
                speed: 280,
                weight: 1400,
                color: 'black',
                year: 2012,
                description: ''

            },
            {
                vendor: 'Skoda',
                model: 'Superb',
                power: 152,
                speed: 260,
                weight: 1600,
                color: 'white',
                year: 2013,
                description: ''
            },
             {
                vendor: 'Amoxicilina',
                model: 'Suspension',
                power: 250,
                speed: 50,
                weight: "B",
                color: 'white',
                year: 2013,
                description: 'Infeccion del tracto respiratorio, urogenital y gastrointestinal, de la region ORL, de la piel, ifecciones geniologicas, gonorrea, leptospirosis, fiebre tofoidea'

            },

Este es mi código completo:

// Let's register Template7 helper so we can pass json string in links
Template7.registerHelper('json_stringify', function (context) {
    return JSON.stringify(context);
});

// Initialize your app
var myApp = new Framework7({
    animateNavBackIcon: true,
    // Enable templates auto precompilation
    precompileTemplates: true,
    // Enabled pages rendering using Template7
    template7Pages: true,
    // Specify Template7 data for pages
    template7Data: {
        // Will be applied for page with "projects.html" url
        'url:projects.html': {
            firstname: 'Josue',
            lastname: 'Gonzalez',
            age: 30,
            position: 'Tecnico de Salud en Farmacia',
            company: 'Area de Salud Limon',
            interests: ['Un buen Cafe', 'Helado', 'Viajar', 'HTML', 'apps', 'footbol'],
            projects: [
                {
                    title: 'Matris de interacciones con busqueda facil',
                    description: ''
                },
                {
                    title: 'PediaDosis',
                    description: 'Aplicacion web para el calculo de dosis pediatricas'
                },
                {
                    // title: 'Android',
                    // description: 'Mobile operating system'
                }
            ]
        },

        // Will be applied for page with data-page="contacts"
        'page:contacts': {
            tel: '(506)+ 8308-2587',
            email: '[email protected]',
            country: 'Costa Rica',
            city: 'Puerto Limon',
            // zip: '12345',
            // street: 'Awesome st'
        },

        // Just plain data object that we can pass for other pages using data-contextName attribute
        cars: [
            {
                vendor: 'Volkswagen',
                model: 'Passat',
                power: 152,
                speed: 280,
                weight: 1400,
                color: 'black',
                year: 2012,
                description: ''

            },
            {
                vendor: 'Skoda',
                model: 'Superb',
                power: 152,
                speed: 260,
                weight: 1600,
                color: 'white',
                year: 2013,
                description: ''
            },
             {
                vendor: 'Amoxicilina',
                model: 'Suspension',
                power: 250,
                speed: 50,
                weight: "B",
                color: 'white',
                year: 2013,
                description: 'Infeccion del tracto respiratorio, urogenital y gastrointestinal, de la region ORL, de la piel, ifecciones geniologicas, gonorrea, leptospirosis, fiebre tofoidea'

            },
            {
                vendor: 'Ford',
                model: 'Mustang',
                power: 480,
                speed: 320,
                weight: 1200,
                color: 'red',
                year: 2014,
                description: ''
            },
        ],

        // Another plain data object, used in "about" link in data-contextName object 
        about: {
            name: 'Josue Gonzalez',
            age: 30,
            position: 'Tecnico de Salud en Farmacia',
            company: 'Area de Salud Limon',
            interests: ['Un buen Cafe', 'Helado', 'Apps Mobiles', 'Html', 'Footbal', 'Viajar']
        }
    }
});

// Export selectors engine
var $$ = Dom7;

// Add main View
var mainView = myApp.addView('.view-main', {
    // Enable dynamic Navbar
    dynamicNavbar: true,
});

function mouseDown(){
    var el = document.getElementById('Articulo1');
    el.addEventListener('input', function(e) { 
    document.getElementById('Peso1').innerHTML=(e.target.value);
});
}



function outputUpdate(vol) {
    document.querySelector('#volume').value = vol;
   
}



var x = 5;
var y = 6;
var z= x+y;
document.getElementById('demo').innerHTML = z;
<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">{{vendor}} {{model}}</div>
    <div class="right"><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a></div>
  </div>
</div>
<div class="pages">
  <div data-page="car" class="page" >
    <div class="page-content">
      <div class="content-block" id="Articulo1">
        <div class="content-block-inner" >
          <h3>{{vendor}} {{model}}</h3>
          <ul>
            <li><b>Presentacion</b> - {{power}} mg / 5ml</li>
            <li id="para1"><b>Dosis Maxima</b> - {{speed}} mg/kg/dia - cada 8 horas</li>
            <li><b>Embarazo</b> - {{weight}} </li>
             <li><b>Color</b> - {{color}}</li>
            <li><b>Year</b> - {{year}}</li>
            <li><strong>IND</strong> -{{description}}</li>
            
          </ul>
        </div>
            <div class="item-input">
                  <div class="range-slider">
                    <h2  id='Peso1' >Peso:</h2>  
                      <input type="range" oninput="mouseDown(); "  min="3.5" max="50" value="12.5" step ="0.50" >
                    </div>
              </div>
<p id="demo"></p>





    </div>
  </div>
</div>
</div>
Preguntado por: Josue Gonzalez

Mauricio Arias Olave

Cuando selecciones un producto, además de colocar el power en esta parte de tu programa:

<li><b>Presentacion</b> - {{power}} mg / 5ml</li>

Coloca el power en otro elemento HTML.

Te sugiero agregar al código HTML un input de tipo hidden cuyo valor será el power del producto seleccionado.

Ejemplo:

<input type="hidden" id="hdf_PowerProducto" value="200" />

Luego, modifica tu lógica para obtener el valor del hdf_PowerProducto y operarlo como desees:

Este sería el resultado:

// Crear una variable que almacenará el power del producto seleccionado:
var powerProducto = 0;

// En tu código -- donde imprimes los valores del producto seleccionado
// asigna el valor a la variable (powerProducto).


// Modifica tu lógica así:
function mouseDown() {
    var el = document.getElementById('Articulo1');
    el.addEventListener('input', function(e) {
        document.getElementById('Peso1').innerHTML = powerProducto * (e.target.value);
    });
}

Fuente

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Evitar múltiples toggle con misma clase – javascript
Pregunta: Para un evento toggle con puro javascript lo desarrollo de la siguiente forma: Javascript // Esta clase lo expande. const expandButton = document.querySelector('.expand-button'); expandButton.addEventListener('click', ()=> { ...
Validación de datos nulos en una función – javascript
Pregunta: Tengo la siguiente función pero al momento validar todos mis datos me los registra todos a excepción del los "containers" que son grids y ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
Uso de js y c# en unity. ¿Igual rendimiento? – javascript c# unity3d
Pregunta: Estoy comenzando con unity . Y veo que se pueden usar c# y js para programar. Mi pregunta es si tanto c# como js ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Agregar marcador especifico a una localización Google Maps – javascript google-maps
Pregunta: ¿Cómo podría añadir un marcador personalizado en Google maps? Actualmente el código que tengo es el siguiente: var locations = [ ['Bondi Beach', -33.890542, ...
Ocultar y Mostrar con Mapa de Google – javascript c# asp.net
Pregunta: Tengo un div en mi página ASP.NET que contiene un Mapa de Google, y necesito mostrarlo y ocultarlo pero no me funciona. Este es el ...
Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables
Pregunta: Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
convertir array a Map en javascript – javascript map nodejs
Pregunta: quiero convertir un arreglo a Map(), en este console "console.log(arrayParaMap);" sale undefined el ejemplo que uso es este //example {a:1,a:2,a:1,b:1,b:5,b:6} el map que prentendo obtener es ...
como iterar un objeto en nodejs – javascript nodejs
Pregunta: Hice esta función: const obj = ; const objMapped = obj.reduce((acc, item) => { ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *