1

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>

3
  • Josue, no comprendo cómo determinas cuál power usas en el método mouseDown(); el 8 sep. 2016 a las 15:01
  • ok, Entiendo que es algo confuso... Power es un dato que se muestra en en el front cuyo valor es llamado por el codigo html asi. <li><b>Presentacion</b> - {{power}} mg / 5ml</li> el 8 sep. 2016 a las 15:40
  • Josue, por favor, actualiza tu pregunta, los comentarios son temporales. Gracias. el 8 sep. 2016 a las 15:41

1 respuesta 1

3

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);
    });
}
3
  • 1
    Exelente.... Funciono. Gracias Por la ayuda. el 8 sep. 2016 a las 17:07
  • @JosueGonzalez, me alegro que te haya funcionado. Si esta pregunta solucionó tu problema, considera marcar esta respuesta como respuesta aceptada. Saludos. el 8 sep. 2016 a las 17:12
  • Listo mau. Saludos el 8 sep. 2016 a las 17:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.