I'm trying to get the percentage from the "timeSpend" and "breakTime" and store in fSubject,sSubject, tSubject and store it in dataset: date[],
so that it can output it but it just gives the value of "timeSpend" and "breakTime" not fSubject,sSubject, tSubject. Also the colour is not working I don't know why enter image description here
let timeSpend = document.querySelector("#time_spend");
let breakTime = document.querySelector("#break_time");
let fSubject = document.querySelector("#first_subjects");
let sSubject = document.querySelector("#second_subjects");
let tSubject = document.querySelector("#third_subjects");
let mostCon = document.querySelector("#first_percentage");
let secCon = document.querySelector("#second_percentage");
let thirdCon = document.queryCommandValue("#third_percentage");
let fSubjectV = (mostCon/100) * (timeSpend + breakTime);
let sSubjectV = (secCon/100)* (timeSpend + breakTime);
let tSubjectV = (thirdCon/100)* (timeSpend + breakTime);
let myChart = document.getElementById("myChart").getContext("2d");
document.querySelector("button").addEventListener("click", () => {
let pieChart = new Chart(myChart, {
type: "pie",
data: {
labels: [
"Time spend",
"Break Time",
fSubject.value,
sSubject.value,
tSubject.value,
],
datasets: [
{
label: "Plan",
data: [
timeSpend.value,
breakTime.value,
mostCon.value,
secCon.value,
thirdCon.value,
],
},
],
},
options: {},
});
});
HTML where I make an input and get the input from
<!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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<link rel="stylesheet" href="CSS/main-style.css" />
<title>Student Planner</title>
</head>
<body>
<header>
<div class="title">
<h1>THE STUDENT PLANNER</h1>
</div>
<div class="sub_header">
<h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
<h3>LET'S PLAN YOUR SESSION</h3>
</div>
</header>
<main>
<input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
<input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" /><br>
<input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" /><input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" /><input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" /> <input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
<br>
<button type="button" class="button">Finished</button>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="JS/main.js"></script>
</main>
<footer>
<p>© DK_CODE</p>
<p>12/3/2022</p>
</footer>
</body>
</html>
you need to initialize all variables into the function of button click, instead of the outside that function.
what happening in your case is, all variables are loading only once when main.js is loading and at that time your input field's values will be blank. so, your all variables will be loaded with blank values, that's why the chart is blank.
Check below code:
document.querySelector("button").addEventListener("click", () => {
let timeSpend = document.querySelector("#time_spend").value;
let breakTime = document.querySelector("#break_time").value;
let fSubject = document.querySelector("#first_subjects").value;
let sSubject = document.querySelector("#second_subjects").value;
let tSubject = document.querySelector("#third_subjects").value;
let mostCon = document.querySelector("#first_percentage").value;
let secCon = document.querySelector("#second_percentage").value;
let thirdCon = document.querySelector("#third_percentage").value;
let fSubjectV = (mostCon / 100) * (timeSpend + breakTime);
let sSubjectV = (secCon / 100) * (timeSpend + breakTime);
let tSubjectV = (thirdCon / 100) * (timeSpend + breakTime);
const canvasEle = document.createElement("canvas");
canvasEle.id = "myChart";
let myChart = canvasEle.getContext("2d");
const firstEle = document.getElementsByClassName("container")[0].children[0];
if (firstEle) {
document
.getElementsByClassName("container")[0]
.replaceChild(canvasEle, firstEle);
} else {
document.getElementsByClassName("container")[0].appendChilde(canvasEle);
}
let pieChart = new Chart(myChart, {
type: "pie",
data: {
labels: ["Time spend", "Break Time", fSubject, sSubject, tSubject],
datasets: [
{
label: "Plan",
data: [timeSpend, breakTime, mostCon, secCon, thirdCon],
backgroundColor: ["black", "red", "orange", "green", "blue"]
}
]
},
options: {}
});
});
.container{
height:500px;
width:500px;
}
<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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<link rel="stylesheet" href="CSS/main-style.css" />
<title>Student Planner</title>
</head>
<body>
<header>
<div class="title">
<h1>THE STUDENT PLANNER</h1>
</div>
<div class="sub_header">
<h3>A SIMPLE PLANNER TO ORGANISE YOUR TIME</h3>
<h3>LET'S PLAN YOUR SESSION</h3>
</div>
</header>
<main>
<input type="number" id="time_spend" class="text-box" placeholder="How much time do you have?" />
<input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" />
<br>
<input type="text" id="first_subjects" class="subjects-box" placeholder="Most confident subject?" />
<input type="number" id="first_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="second_subjects" class="subjects-box" placeholder="Second confident subject?" />
<input type="number" id="second_percentage" class="percantage_subject" placeholder="Understand percentage ">
<input type="text" id="third_subjects" class="subjects-box" placeholder="Third subject?" />
<input type="number" id="third_percentage" class="percantage_subject" placeholder="Understand percentage ">
<br>
<button type="button" class="button">Finished</button>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="JS/main.js"></script>
</main>
<footer>
<p>© DK_CODE</p>
<p>12/3/2022</p>
</footer>
</body>
</html>
Related
I try to develop credit card payment form through using pure CSS and Vanilla JS. Almost, It is done. After submitting the form, thank you section supposed to be displayed, however, it does not work. That section has created by using JS. I do not get it what I am missing. In addition, despite using prevent default, it continues to refresh the page.
Also, after clicking submit button, I want to show alert if input is string rather than number or vice versa. I did not use input number because of the pattern issue. How can I solve it?
Thank you for taking the time.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
submitBtn.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
Hidden class involves display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
The submit should be on the form not on the submission button.
const holderName = document.querySelector("#name")
const cardNumber = document.querySelector("#card-number");
const cardMonth = document.querySelector("#month")
const cardYear = document.querySelector("#year")
const cvcNumber = document.querySelector("#cvc")
const form = document.querySelector("#form")
const submitBtn = document.querySelector("#submit")
const displayedName = document.querySelector(".displayed-name")
const displayedNumber = document.querySelector(".displayed-number")
const displayedMonth = document.querySelector(".displayed-month")
const displayedYear = document.querySelector(".displayed-year")
const displayedCvc = document.querySelector(".displayed-cvc")
holderName.oninput = () => {
displayedName.textContent = holderName.value.toUpperCase();
}
cardNumber.oninput = () => {
displayedNumber.textContent = cardNumber.value.replace(/[^0-9]+/gi, '').replace(/(.{4})/g, '$1 ');
}
cardMonth.oninput = () => {
displayedMonth.textContent = cardMonth.value.replace(/[^0-9]+/gi, "")
}
cardYear.oninput = () => {
displayedYear.textContent = cardYear.value.replace(/[^0-9]+/gi, "");
}
cvcNumber.oninput = () => {
displayedCvc.textContent = cvcNumber.value.replace(/[^0-9]+/gi, "")
}
form.addEventListener("submit", (e) => {
e.preventDefault()
ThankYouDisplay()
form.classList.add("hidden");
})
function ThankYouDisplay () {
const main = document.querySelector("main")
const thankSection = document.createElement("section");
thankSection.classList.add("thank-you")
main.appendChild(thankSection)
const thanksDIV = document.createElement("div")
thanksDIV.classList.add("thank-you-wrapper")
thankSection.appendChild(thanksDIV)
const imgComplete = document.createElement("img");
imgComplete.src = "images/icon-complete.svg";
imgComplete.alt = "complete icon"
thanksDIV.appendChild(imgComplete);
const thankYouHeader = document.createElement("h3");
thankYouHeader.textContent = "THANK YOU";
thanksDIV.appendChild(thankYouHeader);
const thankYouText = document.createElement("p");
thankYouText.textContent = "We've added your card details";
thanksDIV.appendChild(thankYouText);
const continueBtn = document.createElement("button");
continueBtn.textContent = "Continue";
thanksDIV.appendChild(continueBtn);
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive card details form</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
<script src="credit-card.js" defer></script>
</head>
<body>
<main>
<section class="background-image">
<aside>
<img id="background-img" src="images/bg-main-desktop.png" alt="background-for-desktop">
</aside>
</section>
<section class="card-front">
<div class="logos">
<img src="images/card-logo.svg" alt="">
</div>
<div class="displayed-number">
<span>0000 0000 0000 0000</span>
</div>
<div class="displayed-info">
<span class="displayed-name">Jonathan</span>
<div>
<span class="displayed-month">00</span>
<span>/</span>
<span class="displayed-year">00</span>
</div>
</div>
</section>
<section class="card-back">
<span class="displayed-cvc">000</span>
</section>
<!-- <section class="thank-you hidden">
<div class="thank-you-wrapper">
<img src="images/icon-complete.svg" alt="">
<h3>THANK YOU!</h3>
<p>We've added your card details</p>
<button>Continue</button>
</div>
</section> -->
<section class="form-wrapper">
<div class="form-div">
<form id="form">
<label for="name">CARDHOLDER NAME</label>
<input type="text" name="name" id="name" maxlength="25" required>
<label for="card-number">CARD NUMBER</label>
<input type="text" name="card-number" id="card-number" autocomplete="cc-number" maxlength="16" placeholder="xxxx xxxx xxxx xxxx" required>
<div class="date-and-cvc">
<div class="datefield">
<label for="month">DATE</label>
<div class="date">
<input type="text" name="month" id="month" maxlength="2" placeholder="month" required>
<input type="text" name="year" id="year" maxlength="2" placeholder="year" required>
</div>
</div>
<div class="cvc-field">
<label for="cvc">CVC</label>
<div class="cvc">
<input type="text" name="cvc" id="cvc" maxlength="3" minlength="3" required>
</div>
</div>
</div>
<button id="submit" type="submit">Confirm</button>
</form>
</div>
</section>
</main>
</body>
</html>
So I've been trying to get user input to calculate outer product of two vectors using tensorflow.js but I couldn't figure out how to get an array from html to pass it into javascript. for example inside the calculator function const a has to be something like this tf.tensor1d([1, 2, 3])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#2.0.0/dist/tf.min.js"></script>
</head>
<body>
<h1 class="text1">Welcome to vector cross product calculator!</h1>
<h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
<label>vector a</label>
<input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
+<br>
<label>vector b</label>
<input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
<button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</button>
<script>
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(vectora);
const b = tf.tensor1d(vectorb);
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
A utility function getArray can help.
function getArray(data) {
return data.split(',').map(s => +s)
}
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(getArray(vectora));
const b = tf.tensor1d(getArray(vectorb));
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#2.0.0/dist/tf.min.js"></script>
</head>
<body>
<h1 class="text1">Welcome to vector cross product calculator!</h1>
<h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
<label>vector a</label>
<input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
+<br>
<label>vector b</label>
<input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
<button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</button>
<script>
function getArray(data) {
return data.split(',').map(s => +s)
}
function calculator(){
var vectora = document.getElementById("vectora").value;
var vectorb = document.getElementById("vectorb").value;
const a = tf.tensor1d(getArray(vectora));
const b = tf.tensor1d(getArray(vectorb));
var c = tf.outerProduct(a, b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
I have a form where based on which radio button is checked (Metric or Imperial), the two paragraphs should display either KG + CM or LBS + IN. Right now it just displays KG or LBS twice.
Looking for a solution in vanilla JS. This is for a calculator I am working on.
const paragraphWeightElement = document.querySelector(".js-paragraphWeight");
const paragraphHeightElement = document.querySelector(".js-paragraphHeight");
const form = document.querySelector(".js-form");
form.addEventListener("input", (event) => {
paragraphWeightElement.innerText = event.target.value;
paragraphHeightElement.innerText = event.target.value;
});
<!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>
<script defer src="js/script.js"></script>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<form class="js-form">
<ul>
<li>
<label>
<input class="js-metric" type="radio" value="KG" name="weight" />
Metric
</label>
</li>
<li>
<label class="form__label">
<input class="js-imperial" type="radio" value="LBS" name="weight" />
Imperial
</label>
</li>
</ul>
</form>
<p class="js-paragraphWeight"></p>
<p class="js-paragraphHeight"></p>
</body>
</html>
You need to not work with event.target but rather find the element checked.
For the unit lookup, use a simple lookup map.
const paragraphWeightElement = document.querySelector(".js-paragraphWeight");
const paragraphHeightElement = document.querySelector(".js-paragraphHeight");
const form = document.querySelector(".js-form");
const unitLookupMap = {
metric: { weight: 'kg', height: 'meters' },
imperial: { weight: 'lbs', height: 'yards' },
}
form.addEventListener("input", (event) => {
const checked = form.querySelector('[name=units]:checked');
paragraphWeightElement.textContent = unitLookupMap[checked.value].weight;
paragraphHeightElement.textContent = unitLookupMap[checked.value].height;
});
<form class="js-form">
<ul>
<li>
<label>
<input class="js-metric" type="radio" value="metric" name="units" />
Metric
</label>
</li>
<li>
<label class="form__label">
<input class="js-imperial" type="radio" value="imperial" name="units" />
Imperial
</label>
</li>
</ul>
</form>
<p class="js-paragraphWeight"></p>
<p class="js-paragraphHeight"></p>
hey i need help with creating a delete button for my "notes" so it will delete it from the screen and the localstorage (u will notice i tried to make a delBtn function but with no success) i would appreciate if someone could post a fix to mine and explain me where i went wrong.
My JS
const tableBody = document.getElementById("tableBody");
const taskInfo = document.getElementById("taskInfo");
const taskDate = document.getElementById("taskDate");
const taskTime = document.getElementById("taskTime");
const delBtn = document.getElementById("delBtn")
let x = new Task("this is a test", "2021-04-14", "03:19");
let y = new Task("this is a 2nd test", "2021-04-14", "03:19");
//x.add();
//y.add();
let taskList = [
x, y, (new Task("this is a 3rd test", "2021-04-14", "03:19"))
];
if (localStorage.savedTaskList)
taskList = JSON.parse(localStorage.savedTaskList);
displayTable();
function displayTable() {
tableBody.innerHTML = "";
for (let task of taskList) {
const div = document.createElement("div");
div.setAttribute("class","taskZone");
const divTaskInfo = document.createElement("div");
divTaskInfo.setAttribute("class","taskInfo");
const divTaskDate = document.createElement("div");
divTaskDate.setAttribute("class","taskDate");
const divTaskTime = document.createElement("div");
divTaskTime.setAttribute("class","taskTime");
const delBtn = document.createElement("span");
delBtn.setAttribute("class","delBtn");
divTaskInfo.innerText = task.taskInfo;
divTaskDate.innerText = task.taskDate;
divTaskTime.innerText = task.taskTime;
div.append(divTaskInfo, divTaskDate, divTaskTime);
tableBody.appendChild(div);
}
}
delBtn.onclick = function delTask() {
delBtn.parentNode.removeChild(taskZoneElmToDel)
}
function addTask() {
if (taskInfo.value == '' || taskDate.value == '' || taskTime.value == '') {
return alert(`Please fill all the fields.`);
}else{newTask = new Task(taskInfo.value, taskDate.value, taskTime.value);
taskList.push(newTask);
localStorage.savedTaskList = JSON.stringify(taskList);
displayTable();
}
}
Thats the Html part of it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Board</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="scaleable-wrapper" id="scaleable-wrapper">
<div class="very-specific-design" id="very-specific-design">
<header class="Title">
My Task Board
</header>
<div id="Input">
</br>
</br>
<form class="Form" id="formInfo">
<label for="taskInfo">Task Info:</label>
<input type="text" id="taskInfo" name="taskInfo" required autofocus></input></br>
<label for="taskDate">Task Date:</label>
<input type="date" id="taskDate" name="taskDate" required></input></br>
<label for="taskTime">Task Time:</label>
<input type="time" id="taskTime" name="taskTime" required></input></br>
<input type="submit" id="addTaskDiv" class="btn" value="Save" onclick="addTask()"></input>
<input type="reset" id="resetForm" class="btn"></input>
</form>
</br>
</br>
</div>
<div class="outNotes"></div>
<div class="tableBody">
<table>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
</div>
<input type="button" id="delBtn">x</input>
</body>
<script src="Task.js"></script>
<script src="script2.js"></script>
</html>
My code error is pretty obvious but I can´t see it.
It's very simple my form ask the height and weight and calculate the corporal mass index the user input height in meters and convert to inches (function works ok)
input kilos and convert to pounds (works ok too) but in this process must calculate the index and write it in another textbox. that's my problem!
What am I doing wrong??? heres my code:
function myFunctionmts() {
var x = document.getElementById("mters");
var y = document.getElementById("inches");
y.value = ((x.value*100)/2.54).toFixed(2);
document.getElementById("mters").value=x.value;
document.getElementById("inches").value=y.value;
}
</script>
<script>
function myFunctionkg() {
var i = document.getElementById("imc");
var p = document.getElementById("inches");
var x = document.getElementById("kilos");
var z = document.getElementById("pounds");
var step1 = 0;
var step2 = 0;
var step3 = 0;
z.value = (x.value/.454).toFixed(2);
libras.value=z.value;
document.getElementById("pounds").value=z.value;
step1.value = z.value*703;
step2.value = step1.value/p.value;
step3.value = (step2.value/p.value).toFixed(1);
document.getElementById("imc").value=step3.value
}
<form method="POST" action="#">
<input type="text" name="mters" id="mters" required onchange="myFunctionmts()">
<input type="text" name="inches" id="inches" placeholder="Inches" readonly>
<input type="text" name="kilos" id="kilos" required onchange="myFunctionkg()">
<input type="text" name="pounds" id="pounds" placeholder="Pounds" readonly>
<input type="text" name="imc" id="imc" readonly>
<input type="submit" value="Save">
</form>
Try to use this code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Overflow</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form method="POST" action="#">
<label for="mters">meter</label>
<input
type="text"
name="mters"
id="mters"
required
onchange="myFunctionmts()"
/>
<label for="inches">inches</label>
<input
type="text"
name="inches"
id="inches"
placeholder="Inches"
readonly
/>
<label for="kilos">kilos</label>
<input
type="text"
name="kilos"
id="kilos"
required
onchange="myFunctionkg()"
/>
<label for="pounds">pounds</label>
<input
type="text"
name="pounds"
id="pounds"
placeholder="Pounds"
readonly
/>
<label for="imc">imc</label>
<input type="text" name="imc" id="imc" readonly />
<input type="submit" value="Save" />
</form>
<script src="script.js"></script>
</body>
</html>
JS:
function myFunctionmts() {
var x = document.getElementById('mters');
var y = document.getElementById('inches');
y.value = ((x.value * 100) / 2.54).toFixed(2);
document.getElementById('mters').value = x.value;
document.getElementById('inches').value = y.value;
}
function myFunctionkg() {
var imc = document.getElementById('imc'); // mass index
var inches = document.getElementById('inches'); //
var kilos = document.getElementById('kilos');
var pounds = document.getElementById('pounds'); // pounds
var step1 = 0;
var step2 = 0;
var step3 = 0;
pounds.value = (+kilos.value / 0.454).toFixed(2);
// undefined error here, what is this libras all about ???
// libras.value = z.value;
step1 = +pounds.value * 703;
step2 = +step1 / +inches.value;
step3 = (+step2 / +inches.value).toFixed(1);
console.log(step3);
imc.value = step3;
}
Hope it helps.