Разделите сумму в результате включения флажков javascript - PullRequest
Новая
       60

Разделите сумму в результате включения флажков javascript

0 голосов
/ 23 октября 2019

У меня проблема. У меня есть накопленная сумма пожертвований, напр. 10 €. Тогда у меня есть несколько НПО, которые вы можете сделать пожертвованием. У вас есть возможность включить / выключить то, какую НПО вы хотели бы поддержать. Либо вы можете сделать пожертвование всем им, что означает, что каждая НПО получит 10 € / 3 = 3,33 € каждая. Вы можете выбрать два, и распределение будет 10 € / 2 = 5 € каждый и т. Д.

У меня есть проблемы с поиском способа сделать это в JavaScript. Не могли бы вы привести меня на правильный путь? Благодарю. 

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>

Ответы [ 4 ]

0 голосов
/ 23 октября 2019

Вы можете найти все выбранные флажки и использовать полученную длину для деления на общую сумму пожертвований во всех организациях. 

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 голосов
/ 23 октября 2019

$(".orgs input[type='checkbox']:checked").length; вернет, сколько флажков выбрано. Общая сумма пожертвования будет разделена на количество выбранных организаций. 

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 голосов
/ 23 октября 2019

У меня нет полного представления о том, откуда вы получаете накопленную сумму пожертвований, но я могу предположить, что флажки с названием «организация» являются НПО. В этом случае вы можете сделать что-то вроде 

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

В первой строке в основном выполняется поиск всех входных данных с проверенными именами = "organization" и подсчет количества

0 голосов
/ 23 октября 2019

let checked = document.querySelectorAll('input[type="checkbox"]:checked').length

Если вы вернете вам счетчик отмеченных флажков - вы можете использовать его в имеющемся разделе

...