Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="fruitsCalc">
- <div class="container">
- <div class="fruits" id="Apple" data-name="Apple" onclick="fruitClick()">Apple</div>
- <div class="fruits" id="Orange" data-name="Orange" onclick="fruitClick()">Orange</div>
- <div class="fruits" id="Apricot" data-name="Apricot" onclick="fruitClick()">Apricot</div>
- </div>
- <div class="container">
- <div class="fruits" id="Mandarin" data-name="Mandarin" onclick="fruitClick()">Mandarin</div>
- <div class="fruits" id="Stawberry" data-name="Stawberry" onclick="fruitClick()">Stawberry</div>
- <div class="fruits" id="Rastberry" data-name="Rastberry" onclick="fruitClick()">Rastberry</div>
- </div>
- <div class="result">
- <h2 style="text-align: center">RESULT:</h2>
- </div>
- </div>
- let arr = [
- {title: 'Apple', val: "25 cal."},
- {title: 'Orange', val: "35 cal."},
- {title: 'Apricot', val: "45 cal."},
- {title: 'Mandarin', val: "55 cal."},
- {title: 'Stawberry', val: "65 cal."},
- {title: 'Rastberry', val: "75 cal."},
- ];
- function fruitClick() {
- let result = document.querySelector('.result');/
- for (let i in fruitItem) {
- let out = '';
- fruitItem[i].onclick = function () {
- for (let x in arr) {
- if (fruitItem[i].getAttribute('data-name') == arr[x].title) {
- out += `<p>${arr[x].val}</p>`;
- }
- }
- result.innerHTML = out;
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement