Estoy teniendo un problema Tengo una suma acumulada de donaciones reunidas, ej. 10 €. Luego tengo varias ONG a las que puedes elegir donar. Tiene la oportunidad de activar / desactivar a qué ONG le gustaría apoyar. Puede optar por donar a todos, lo que significa que cada ONG recibirá 10 € / 3 = 3,33 € cada uno. Puede elegir dos y la asignación será de 10 € / 2 = 5 € cada uno, etc.

Tengo problemas para encontrar una manera de hacer esto en javascript. ¿Podrías guiarme por el camino correcto? Gracias.

function goBack() {
  window.history.back();
}

function myFunction() {
    var y = 5;
    var x = y / 3;
    document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="Velgørenhed.js"></script>

    <link rel="stylesheet" type="text/css" href="Velgørenhed.css"/>

</head>
<body>

<!-- Tilbage knap  -->
<button id="tilbage" onclick="goBack()">Tilbage</button>

<form action="/action_page.php" method="get">
    <input type="checkbox" name="organisation" value="WHO" checked> Vælg velgørenhedsorgsnisation WHO<br>
    <input type="checkbox" name="organisation" value="Plastic Change" checked> Vælg velgørenhedsorgsnisation Plastic Change<br>
    <input type="checkbox" name="organisation" value="Sea Turtle Conservancy" checked> Vælg velgørenhedsorgsnisation Sea Turtle Conservancy<br>
    <input type="submit" value="Submit">
</form>

<p>y = 5, calculate x = y / 3, and display x:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<!-- Log ud knap -->
<button id="logOut" onclick="logOut()">Log ud</button>

<script>
    function logOut() {
        document.location.href = "1logInd.html";
    }
</script>




</body>
</html>
0
perpleksl 23 oct. 2019 a las 16:07

3 respuestas

La mejor respuesta

Puede encontrar todas las casillas de verificación seleccionadas y usar la longitud resultante para dividir por la cantidad total que se donará en todas las organizaciones.

const form = document.forms[0];

form.elements['calc-btn'].addEventListener('click', function() {
  let total = parseInt(form.elements['amount'].value, 10);
  let count = selectedCheckboxes(form, 'organisation').length;
  document.getElementById('result').textContent = average(total, count).toFixed(2);
});

triggerEvent(form.elements['calc-btn'], 'click'); // Calculate on load

function average(total, count) {
  return count > 0 ? total / count : 0;
}

function selectedCheckboxes(form, name) {
  return Array.from(form.elements[name]).filter(c => c.checked);
}

function triggerEvent(el, eventName) {
  var event = document.createEvent('HTMLEvents');
  event.initEvent(eventName, true, false);
  el.dispatchEvent(event);
}
fieldset {
  margin-bottom: 0.5em;
}

.result-display {
  margin-top: 1em;
}
<form action="/action_page.php" method="get">
  <h2>Donation Form</h2>
  <fieldset>
    <legend>Organizations</legend>
    <input type="checkbox" name="organisation" value="WHO" checked>
      Vælg velgørenhedsorgsnisation WHO<br>
    <input type="checkbox" name="organisation" value="Plastic Change" checked>
      Vælg velgørenhedsorgsnisation Plastic Change<br>
    <input type="checkbox" name="organisation" value="Sea Turtle Conservancy" checked>
      Vælg velgørenhedsorgsnisation Sea Turtle Conservancy<br>
  </fieldset>
  <fieldset>
   <legend>Donation amount (€)</legend>
    <input type="text" name="amount" value="10.00" />
  </fieldset>
  <input type="button" id="calc-btn" value="Calculate" />
  <div class="result-display">Calculated donation amount: <span id="result">0</span>€</div>
</form>
0
Mr. Polywhirl 23 oct. 2019 a las 13:42

No tengo el alcance completo de dónde está obteniendo la suma acumulada de donación, pero puedo suponer que las casillas de verificación con el nombre de "organización" son las ONG. En ese caso, puedes hacer algo como

var numOrgsDonateTo = document.querySelectorAll("input[name='organisations[]']:checked").length
var allocation = sumDonation / numOrgsDonateTo

La primera línea es básicamente buscar todas las entradas con name = "organizaciones" que están marcadas y contando cuántas hay

0
Justin 23 oct. 2019 a las 13:25

$(".orgs input[type='checkbox']:checked").length; devolverá cuántas casillas de verificación están seleccionadas. El monto total de la donación se dividirá entre el número de organizaciones seleccionadas.

function goBack() {
  window.history.back();
}

function myFunction() {    
    // let's suppose that we have 20$ donated
    var totalDonations = 20;
    
    var noOfChckSelected = $(".orgs input[type='checkbox']:checked").length;
    console.log("no of organisations selectd: " + noOfChckSelected)
    
    var donationPerOrg = totalDonations / noOfChckSelected;
    
    document.getElementById("demo").innerHTML = donationPerOrg;
    
    console.log("each organisation will receive: " + donationPerOrg)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="Velgørenhed.js"></script>

    <link rel="stylesheet" type="text/css" href="Velgørenhed.css"/>

</head>
<body>

<!-- Tilbage knap  -->
<button id="tilbage" onclick="goBack()">Tilbage</button>

<form action="/action_page.php" method="get">
<div class = "orgs">
    <input type="checkbox" name="organisation" value="WHO" checked> Vælg velgørenhedsorgsnisation WHO<br>
    <input type="checkbox" name="organisation" value="Plastic Change" checked> Vælg velgørenhedsorgsnisation Plastic Change<br>
    <input type="checkbox" name="organisation" value="Sea Turtle Conservancy" checked> Vælg velgørenhedsorgsnisation Sea Turtle Conservancy<br>
    <input type="submit" value="Submit">
    </div>
</form>

<p>y = 5, calculate x = y / 3, and display x:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<!-- Log ud knap -->
<button id="logOut" onclick="logOut()">Log ud</button>

<script>
    function logOut() {
        document.location.href = "1logInd.html";
    }
</script>




</body>
</html>
0
Mara Black 23 oct. 2019 a las 13:21