Import Div from 2 different HTML files and add its content - javascript

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

Related

number value return NaN in js

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>

I can not calculate 15% of the amount of goods [closed]

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>

how to create javascript function that takes inputs from multiple functions

I'd like to add a function to this code that will display the difference between the values calculated by the other two currently implemented functions but I'm unsure how to implement it.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
</head>
<body>
<div>
<header>
</header>
<main>
<p>Your current daily goal is:<span id="UserGoal"></span></p>
<br>
<p>Your current calories eaten for the day:<span id="EatenCalories">0</span></p>
<br>
<p>Remaining calories for today:<span id="RemainingCalories"></span></p>
<label for="Goal">Please enter your daily Goal</label>
<input type="number" id="Goal" name="Goal">
<input type="submit" onclick="updateGoal();"/>
<br>
<input type="number" id="addCalories" name"addCalories">
<input type="button" value="Update Calories" onclick="addCalories();"/>
</main>
<script>
function updateGoal(){
this.UserGoal = document.getElementById("Goal").value;
document.getElementById("UserGoal").innerHTML = this.UserGoal;
}
function addCalories(){
if (this.EatenCalories = ''){ //made 1 = sign, made check ''
this.EatenCalories = document.getElementById("addCalories").value;
document.getElementById("EatenCalories").innerHTML = this.EatenCalories;
}
else{
this.EatenCalories = document.getElementById("EatenCalories").innerText;
parseFloat(EatenCalories);
this.Calories=document.getElementById("addCalories").value;
this.Result=parseFloat(this.Calories)+parseFloat(this.EatenCalories);
document.getElementById("EatenCalories").innerHTML = this.Result;
}
}
</script>
</div>
</body>
</html>
Both the functions store their results in HTML elements by updating their innerHTML
Your new function can use these values to calculate the difference and put the result into another HTML element’s innerHTML to display it.
For example,
<div id=“difference”></div>
function calcDifference() {
document.getElementById("difference").innerHTML = document.getElementById("EatenCalories").innerHTML - document.getElementById("UserGoal").innerHTML;
}

In JavaScript, I have an error in calling functions, variables, and displaying those variables

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.

How do I render values of input elements into a div correctly?

I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA_Compatible" content="ie=edge">
<title> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps

Categories