Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm looking for a solution to calculate 15% of the amount of goods. Currently i have this code:
function getDomNodesBySelector(selector) {
return Array.from(document.querySelectorAll(selector));
}
document.querySelector('.total__button').addEventListener('click', applyDiscount);
function applyDiscount() {
let numPrice = getDomNodesBySelector.forEach(function (item) {
let numDiscount = 15;
let totalValue = numPrice - (numDiscount / 100);
return totalValue;
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Cart</title>
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/entrance-test/lesson-2/task-2/fonts.css">
<link rel="stylesheet" href="style.css">
</head>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">6390</span></p>
</div>
</article>
<section class="total page__total">
<button class="total__button">Use discount 15%</button>
<div class="total__prices">
<h2 class="total__title">Total:</h2>
<p class="total__rub price-default"><span class="total-price-value">46910</span></p>
</div>
</section>
<script src="./task.js"></script>
</body>
What am i doing wrong? And how to fix the issue?
Thanks in advance.
The argument to the event listener is the event, not a list of DOM elements to loop over. You need to call getDomNodesBySelector() to get the list of elements, and specify the selector for the prices that you want to apply the discounts to. I've guessed a class name, replace that with the appropriate selector for your cost elements.
Then you need to accumulate all the discounted prices. I've used the reduce() method below to do this. Since the card prices are in <span> rather than <input>, you need to use .innerText to get the price, not .value.
To get the discounted price, you need to subtract the discount fraction from 1.
The return value of an event listener isn't shown anywhere, so it needs to update the DOM to display the total.
function getDomNodesBySelector(selector) {
return Array.from(document.querySelectorAll(selector));
}
document.querySelector('.total__button').addEventListener('click', applyDiscount);
function applyDiscount() {
let items = getDomNodesBySelector(".price-value");
let numDiscount = 15;
let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);
document.querySelector(".total-price-value").innerText = totalValue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Cart</title>
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/entrance-test/lesson-2/task-2/fonts.css">
<link rel="stylesheet" href="style.css">
</head>
<div class="card__price">
<p class="card__rub price-default"><span class="price-value">6390</span></p>
</div>
</article>
<section class="total page__total">
<button class="total__button">Use discount 15%</button>
<div class="total__prices">
<h2 class="total__title">Total:</h2>
<p class="total__rub price-default"><span class="total-price-value">46910</span></p>
</div>
</section>
<script src="./task.js"></script>
</body>
Related
in this excercise i create a counter that has a number display and 2 button to lower and increase number. i assign number to parseInt(num) to convert num object to number. i use alert to check type of number. typeof(number) return number but number return NaN. please someone explain.[edit]reading comment, i was able to solve the problem. i have upadated the solution
var low = document.getElementById("low")
var add = document.getElementById("add")
low.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number - 1
})
add.addEventListener("click", function () {
var num = document.getElementById("num")
var number = parseInt(num.innerText)
num.innerHTML = number + 1
})
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<div class="container">
<h1>counter</h1>
<h1 id="num">0</h1>
<div class="btn">
<button id="low">lower count</button>
<button id="add">add count</button>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
You are trying to parseInt(num) but num is DOM element - not number. You want its content. You can get it with .innerText.
const num = document.getElementById("num")
console.log(num);
console.log(parseInt(num));
console.log(parseInt(num.innerText));
<h1 id="num">0</h1>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I´m trying to make a simple To-do List, and I want it to have a button to add the tasks that I want and another button to remove all tasks but when I click the delete button I get an error: "Cannot read property 'removeChild' of undefined" I don´t know why it says the parentNode is undefined.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>To do List</title>
</head>
<body>
<header>
<h1>To-do List</h1>
<div id="form">
<input type="text" name="" id="tarefa" value="Add an item!">
<button id="submit">Submit</button>
<button id="delete">Clear List</button>
</div>
</header>
<main>
<ul id="lista">
<li id="112">Test1</li>
<li>Test2</li>
</ul>
</main>
<script src="javascript.js"></script>
</body>
</html>
//Javascript file
const tarefa = document.getElementById("tarefa")
const adicionar = document.getElementById("submit")
const limpar = document.getElementById("delete")
const padre = document.getElementById("lista")
const fpp = document.querySelectorAll("li")
//Add the tasks
function enviar(e){
var coisa = document.createElement("li")
let escrito = tarefa.value;
padre.appendChild(coisa)
coisa.innerHTML = escrito
}
//Delete the tasks
function apagar(e){
fpp.parentNode.removeChild(fpp)
console.log("aaaa")
}
adicionar.addEventListener("click",enviar)
limpar.addEventListener("click",apagar)
.querySelectorAll returns a NodeList (because you're selecting all li tags, not just one), so you need to do a forEach loop. Give the context, I asume fds is supposed to be fpp (you never define fds in the code you provided), so here is the code you would need, given that assumption:
function apagar(e){
fpp.forEach(function(el) {
el.parentNode.removeChild(el)
})
}
Update
Use this so that you dont get null errors once the list is deleted the first time.
function apagar(e){
document.querySelectorAll("li").forEach(function(el) {
el.parentNode.removeChild(el)
})
}
How about
function apagar(){
padre.innerHTML = "";
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
it's my first time here, I still have to settle down. the problem with the code is that the result does not come out. Help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<div id="operatore" value="moltiplicazione"></div>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
</head>
<body>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
I don't understand what it could be, it all seems right, it doesn't give me debugging error I hope you help me🥺
As others have already mentioned, you messed a few things up.
First of all you have to put your form/markup into the body. Secondly a div cannot have a value, so may you use a hidden input or some kind of select.
Here is a working fiddle:
https://jsfiddle.net/j2gesdbm/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<input type="hidden" id="operatore" value="moltiplicazione"/>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
You are using a "value" attribute for a div
<div id="operatore" value="moltiplicazione"></div>
You can not add the "value" attribute to a div. If you want give a value to this tag, you have to change to an input tag
<input id="operatore" value="moltiplicazione"></input>
If you don't want the input tag to be visible you can set the input type as "hidden"
<input type="hidden" id="operatore" value="moltiplicazione"></input>
I hope I've helped :)
I am making a clicker game. When I display the moneyCurrent variable I get incorrect numbers. The numbers don't actually join. This is in the sellTech() function.
If you want the full project go to enter link description here techClicker
This is on repl.it and that is not the problem.
I have tried parseInt() and Number() and the numbers keep adding like
they are strings.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tech Clicker</title>
<link rel="shortcut icon" type="image/png" href="IMAGE"/>
<link href="techClicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tech Clicker</h1>
<h2 id="moneyValueText">$0</h2>
<div id="ccDiv">
<input id="ccMakeButton"type="image" src="IMAGE"
onclick="ccClickFunc()" width="50"
height="50">
<p> </p>
<button id="ccSellButton"onclick="sellTech()">Sell Computer
Chips</button>
<h4 id="ccCounter">Computer Chips = </h4>
</div>
<div id="usbDiv">
<input id="mcMakeButton"type="image"
src="IMAGE"
onclick="mcClickFunc()" width="38"
height="26">
<p> </p>
<button id="mcSellButton"onclick="sellTech()">Sell Memory Chips</button>
<h4 id="mcCounter">Memory Chips = </h4>
</div>
<script src="clickGainFunc.js"></script>
<script src="sellTechV2.js"></script>
</body>
</html>
var ccPrice = 0.25
var ccSellAmount
var mcPrice = 0.35;
var mcSellAmount;
//JAVASCRIPT
function sellTech(){
ccSellAmount = cc * ccPrice;
mcSellAmount = mc * mcPrice;
moneyCurrent = ccSellAmount + mcSellAmount;
document.getElementById("moneyValueText").innerHTML = moneyCurrent;
cc = 0;
mc = 0;
document.getElementById("ccCounter").innerHTML = "Computer Chips = " + cc;
document.getElementById("mcCounter").innerHTML = "Memory Chips = " + mc;
}
I expected that the numbers would add up and not drop in value.
This is a little hard to explain so go to
https://techclicker--beraemirkoklu.repl.co/
and then click on the computer chip once. And then sell it. 0.25. If you sell 2, 0.5. if you sell 1, again .25. I am trying to fix that too.
I have in one HTML this code and it works fine to do a basic math operation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Facultad Contaduria</title>
<link rel="stylesheet" type="text/css" href="style_d.css"/>
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<meta name="description" content="Tile">
<meta name="keywords" content="Words">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<div id="prim0">
<p id="prim"> 10 </p>
</div>
<div id="seg0">
<p id="seg"> 100 </p>
</div>
<div id="ter0">
<p id="ter"></p>
</div>
</div>
<script>
var x = (1 * document.getElementById("seg").innerHTML) / document.getElementById("prim").innerHTML ;
document.getElementById("ter").innerHTML = x;
</script>
</body>
</html>
This code is very similar to other HMTL file i have, the problem is that i don't know how to add just one DIV <p id="seg"> 100 </p> from 2 different HTML files to another HTML file, the code i have is this, but it doesn't work
<div id="gran_total">
<p id="total"></p>
<script type="text/javascript">
var x = (document.getElementById("seg").load("contaduria.html #seg") + document.getElementById("seg").load("derecho.html #seg")) ;
document.getElementById("total").innerHTML = x;
</script>
</div>
Thanks in advance
JavaScript Approach
Two Html you have :
Html file 1 :
<div id="wrapper">
<div id="prim0">
<p id="prim"> 10 </p>
</div>
<div id="seg0">
<p id="seg"> 100 </p>
</div>
Html File 2 :
<div id="gran_total">
<p id="total"></p>
</div>
Write a JavaScript file :
var p1 = document.getElementById('prim').innerHTML; //First take innerHTML which will be in string, from file 1
var p2 = document.getElementById('seg').innerHTML; //First take innerHTML which will be in string, from file 2
p1 = Number(p1); // Convert text into number
p2 = Number(p2);
var total = p1 + p2 ;
document.getElementById('total').innerHTML = total;
Note : P returns text so we need to convert it into number ..
Attach your javascript file in both html you will get the value in total box