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>
Related
I'm new to JS and I'm just practicing. I have this form that sets data in an object which is later displayed on the DOM. It works but it just shows a "key" at a time. If I add new elements they replace the existing one.
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML = newIt.namee + " " + newIt.surnamee
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
I've tried the push() method but it works with arrays. I've also tried to create an object instead of a class but I get the same grief
Thank you in advance
Maybe you looking for this:
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
document.getElementById('box').innerHTML += `<p>` + newIt.namee + " " + newIt.surnamee + `</p>`;
}
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
let html = `${document.getElementById('box').innerHTML}<p>${newIt.namee} ${newIt.surnamee}</p>`
document.getElementById('box').innerHTML = html
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
Hope it help :)
or you can use this
https://www.w3schools.com/jsref/met_node_appendchild.asp
any stored value can be wrapped in a div tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<form onsubmit={Func()}>
<input id="namee" > </input>
<input id="surnamee"> </input>
<button type=submit> send </button>
</form>
<p id="box"> </p>
</body>
</html>
<script>
class Items {
constructor(namee, surnamee) {
this.namee = namee;
this.surnamee = surnamee;
}
}
function Func() {
event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;
let newIt = new Items(nameval, surnval);
console.log(newIt)
const row = document.createElement('div');
row.innerText = newIt.namee + " " + newIt.surnamee;
document.getElementById('box').appendChild(row);
}
</script>
this is my first post here. Please excuse my poor code, I will try my best to describe my issue.
I'm building a Library app from Odin Project. Currently I'm able to create an object with values I'm inputting in a popup form. Created object is being displayed on the screen with correct values as intended.
My goal is to update Read status in a myLibrary array when I click on a button. I was able to update the text content on the button with a click, unfortunately I have no idea how to update a read value in an array for the created object.
I would really appreciate any suggestions.
Thank you for your time
let myLibrary = [];
const registerBook = document.getElementById("registerBook");
const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
let read = document.getElementById("read-btn");
let form = document.getElementById("bookForm");
let optionYes = document.getElementById("option-yes");
let optionNo = document.getElementById("option-no");
function openForm() {
document.getElementById("bookForm").style.display = "block";
}
function closeForm() {
document.getElementById("bookForm").style.display = "none";
}
registerBook.addEventListener("click", function() {
myLibrary.push({
title: title.value,
author: author.value,
pages: pages.value,
read: read.value,
})
renderBooks();
console.log(myLibrary);
})
function renderBooks() {
let bookShelf = document.querySelector('#bookShelf');
let bookCover = document.createElement('div');
bookCover.classList.add('bookCover');
bookShelf.appendChild(bookCover);
let deleteCard = document.createElement('div');
deleteCard.classList.add('delete-card');
deleteCard.id = "deleteCard";
bookCover.append(deleteCard);
let bookTitleTag = document.createElement('div');
bookTitleTag.classList.add('book-title-tag');
bookCover.append(bookTitleTag);
bookTitleTag.textContent = 'Book title:';
let bookTitle = document.createElement('div');
bookTitle.classList.add('book-title');
bookCover.append(bookTitle);
let bookAuthorTag = document.createElement('div');
bookAuthorTag.classList.add('book-author-tag');
bookCover.append(bookAuthorTag);
bookAuthorTag.textContent = 'Book author:';
let bookAuthor = document.createElement('div');
bookAuthor.classList.add('book-author');
bookCover.append(bookAuthor);
let bookPagesTag = document.createElement('div');
bookPagesTag.classList.add('book-pages-tag');
bookCover.append(bookPagesTag);
bookPagesTag.textContent = 'No of pages:';
let bookPages = document.createElement('div');
bookPages.classList.add('book-pages');
bookCover.append(bookPages);
let bookStatusTag = document.createElement('div');
bookStatusTag.classList.add('book-pages-tag');
bookCover.append(bookStatusTag);
bookStatusTag.textContent = 'Have you read the book?:';
let bookStatus = document.createElement('button');
bookStatus.classList.add('book-status-btn');
bookStatus.id = 'book-status-btn';
bookCover.append(bookStatus);
bookTitle.textContent = title.value;
bookAuthor.textContent = author.value;
bookPages.textContent = pages.value;
bookStatus.textContent = read.value;
/*Book status in card is updated */
bookStatus.addEventListener("click", () => {
if (bookStatus.textContent === 'Yes') {
bookStatus.textContent = 'No'
} else {
if (bookStatus.textContent === 'No') {
bookStatus.textContent = 'Yes'
}
}
});
/* Trying to update array */
bookStatus.addEventListener("click", () => {
if (bookCover.read === 'Yes') {
bookCover.read = 'No'
} else {
if (bookCover.read === 'No') {
bookCover.read = 'Yes'
}
}
console.log(myLibrary);
});
deleteCard.addEventListener("click", () => {
bookShelf.removeChild(bookCover);
myLibrary.splice(bookCover, 1);
});
}
<!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="styles.css">
<script defer src="index.js"></script>
<title>Library</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">Library</div>
<div class="buttons">
<div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div>
<!--<div class="login-btn">Log in</div> -->
</div>
</div>
<div class="main">
<div class="form-popup" id="bookForm">
<form action="/action_page.php" onsubmit="event.preventDefault()" class="form-container">
<div class="form-popup-close" onclick="closeForm()"></div>
<h1>Add Book</h1>
<label for="title"><b>Book title</b></label>
<input type="text" id="title" placeholder="Enter book title" name="title" required>
<label for="author"><b>Author</b></label>
<input type="text" id="author" placeholder="Enter author name" name="author">
<label for="pages"><b>No. of pages</b></label>
<input type="number" id="pages" placeholder="Number of pages" name="pages">
<div class="form-bot">
<p>Have you read it?</p>
<select name="read" id="read-btn">
<option id="option-yes" value="Yes">Yes</option>
<option id="option-no" value="No">No</option>
</select>
</div>
<button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button>
</form>
</div>
<div id="bookShelf"></div>
</div>
</div>
</body>
</html>
You can get the title from the bbookTitle DIV, and search the array for that title. Then you can toggle the read property.
let myLibrary = [];
const registerBook = document.getElementById("registerBook");
const title = document.getElementById("title");
const author = document.getElementById("author");
const pages = document.getElementById("pages");
let read = document.getElementById("read-btn");
let form = document.getElementById("bookForm");
let optionYes = document.getElementById("option-yes");
let optionNo = document.getElementById("option-no");
function openForm() {
document.getElementById("bookForm").style.display = "block";
}
function closeForm() {
document.getElementById("bookForm").style.display = "none";
}
registerBook.addEventListener("click", function() {
myLibrary.push({
title: title.value,
author: author.value,
pages: pages.value,
read: read.value,
})
renderBooks();
console.log(myLibrary);
})
function renderBooks() {
let bookShelf = document.querySelector('#bookShelf');
let bookCover = document.createElement('div');
bookCover.classList.add('bookCover');
bookShelf.appendChild(bookCover);
let deleteCard = document.createElement('div');
deleteCard.classList.add('delete-card');
deleteCard.id = "deleteCard";
bookCover.append(deleteCard);
let bookTitleTag = document.createElement('div');
bookTitleTag.classList.add('book-title-tag');
bookCover.append(bookTitleTag);
bookTitleTag.textContent = 'Book title:';
let bookTitle = document.createElement('div');
bookTitle.classList.add('book-title');
bookCover.append(bookTitle);
let bookAuthorTag = document.createElement('div');
bookAuthorTag.classList.add('book-author-tag');
bookCover.append(bookAuthorTag);
bookAuthorTag.textContent = 'Book author:';
let bookAuthor = document.createElement('div');
bookAuthor.classList.add('book-author');
bookCover.append(bookAuthor);
let bookPagesTag = document.createElement('div');
bookPagesTag.classList.add('book-pages-tag');
bookCover.append(bookPagesTag);
bookPagesTag.textContent = 'No of pages:';
let bookPages = document.createElement('div');
bookPages.classList.add('book-pages');
bookCover.append(bookPages);
let bookStatusTag = document.createElement('div');
bookStatusTag.classList.add('book-pages-tag');
bookCover.append(bookStatusTag);
bookStatusTag.textContent = 'Have you read the book?:';
let bookStatus = document.createElement('button');
bookStatus.classList.add('book-status-btn');
bookStatus.id = 'book-status-btn';
bookCover.append(bookStatus);
bookTitle.textContent = title.value;
bookAuthor.textContent = author.value;
bookPages.textContent = pages.value;
bookStatus.textContent = read.value;
/*Book status in card is updated */
bookStatus.addEventListener("click", () => {
if (bookStatus.textContent === 'Yes') {
bookStatus.textContent = 'No'
} else {
if (bookStatus.textContent === 'No') {
bookStatus.textContent = 'Yes'
}
}
});
/* Trying to update array */
bookStatus.addEventListener("click", () => {
let title = bookTitle.textContent;
let book = myLibrary.find(book => book.title === title);
if (book) {
book.read = book.read === 'Yes' ? 'No' : 'Yes';
bookStatus.textContent = book.read;
}
console.log(myLibrary);
});
deleteCard.addEventListener("click", () => {
bookShelf.removeChild(bookCover);
myLibrary.splice(bookCover, 1);
});
}
<!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="styles.css">
<script defer src="index.js"></script>
<title>Library</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">Library</div>
<div class="buttons">
<div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div>
<!--<div class="login-btn">Log in</div> -->
</div>
</div>
<div class="main">
<div class="form-popup" id="bookForm">
<form action="/action_page.php" onsubmit="event.preventDefault()" class="form-container">
<div class="form-popup-close" onclick="closeForm()"></div>
<h1>Add Book</h1>
<label for="title"><b>Book title</b></label>
<input type="text" id="title" placeholder="Enter book title" name="title" required>
<label for="author"><b>Author</b></label>
<input type="text" id="author" placeholder="Enter author name" name="author">
<label for="pages"><b>No. of pages</b></label>
<input type="number" id="pages" placeholder="Number of pages" name="pages">
<div class="form-bot">
<p>Have you read it?</p>
<select name="read" id="read-btn">
<option id="option-yes" value="Yes">Yes</option>
<option id="option-no" value="No">No</option>
</select>
</div>
<button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button>
</form>
</div>
<div id="bookShelf"></div>
</div>
</div>
</body>
</html>
I am trying to add a style [text-decoration: line-through] to a value of an object property. How to add the style at javascript code line no 28 closeIssue?
I want to add style to the currentIssue.description.
Here is my code:
document.getElementById('issueInputForm').addEventListener('submit', submitIssue);
function submitIssue(e) {
const getInputValue = id => document.getElementById(id).value;
const description = getInputValue('issueDescription');
const severity = getInputValue('issueSeverity');
const assignedTo = getInputValue('issueAssignedTo');
const id = Math.floor(Math.random() * 100000000) + '';
const status = 'Open';
const issue = { id, description, severity, assignedTo, status }; // issue = object
let issues = [];
if (localStorage.getItem('issues')) {
issues = JSON.parse(localStorage.getItem('issues'));
}
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
document.getElementById('issueInputForm').reset();
fetchIssues();
e.preventDefault();
}
const closeIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const currentIssue = issues.find(issue => issue.id == id);
currentIssue.status = 'Closed';
// How to add a style on "currentIssue.description"
localStorage.setItem('issues', JSON.stringify(issues));
fetchIssues();
}
const deleteIssue = id => {
const issues = JSON.parse(localStorage.getItem('issues'));
const remainingIssues = issues.filter(issue => issue.id != id)
localStorage.setItem('issues', JSON.stringify(remainingIssues));
fetchIssues();
}
const fetchIssues = () => {
const issues = JSON.parse(localStorage.getItem('issues'));
const issuesList = document.getElementById('issuesList');
issuesList.innerHTML = '';
for (var i = 0; i < issues.length; i++) {
const { id, description, severity, assignedTo, status } = issues[i];
issuesList.innerHTML += `<div class="well">
<h6>Issue ID: ${id} </h6>
<p><span class="label label-info"> ${status} </span></p>
<h3 id="xxx"> ${description} </h3>
<p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
<p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
Close
Delete
</div>`;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Issue Tracker: </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.lt {
text-decoration: line-through;
}
</style>
</head>
<body onload="fetchIssues()">
<div class="container">
<h1>Issue Tracker: <span id="issue-counter"></span></h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="issueDescription">Description</label>
<input type="text" class="form-control" id="issueDescription" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverity">Severity</label>
<select id="issueSeverity" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedTo">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Enter responsible ...">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
How can I do that?
man u can try this :
value.style.textDecoration = 'line-through'
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>To Do List</h1>
<form>
<input autocomplete="off" autofocus id="todotext"
type="text">
<input onclick="serve(); return false" type="submit">
</form>
<ol id="add"></ol>
</body>
<script>
function serve(){
const neww = document.getElementById('add');
let text = document.getElementById('todotext').value;
const a = document.createElement('li');
a.innerText = text;
neww.appendChild(a);
document.getElementById('todotext').value = "";
}
</script>
</html>
Here is my code and I want to return an 'Alert' if someone submit empty form.
How should I do it ? Any help will be appreciated
Here's an image:
Is this what you want?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>To Do List</h1>
<form>
<input autocomplete="off" autofocus id="todotext"
type="text">
<button onclick="todotext.value != '' ? serve() : alert('Input field is blank')" >Submit</button>
</form>
<ol id="add"></ol>
</body>
<script>
var todotext = document.getElementById('todotext');
function serve() {
const neww = document.getElementById('add');
let text = todotext.value;
const a = document.createElement('li');
a.innerText = text;
neww.appendChild(a);
document.getElementById('todotext').value = "";
}
</script>
</html>
String.prototype.isEmpty = function() {
return (this.length === 0 || !this.trim());
};
function serve(){
const neww = document.getElementById('add')
let text = document.getElementById('todotext').value;
if( text.isEmpty() ){
alert('cannot be blank');
return;
}
const a = document.createElement('li')
a.innerText = text
neww.appendChild(a)
document.getElementById('todotext').value = ""
}
<h1>To Do List</h1>
<form>
<input autocomplete="off" autofocus id="todotext"
type="text">
<input onclick="serve(); return false" type="submit">
</form>
<ol id="add"></ol>
add condition when append new element by checking the value of todoText
function serve(){
const neww = document.getElementById('add')
let text = document.getElementById('todotext').value
if(text == ""){
alert('field is required');
}
else{
const a = document.createElement('li')
a.innerText = text
neww.appendChild(a)
document.getElementById('todotext').value = ""
};
}
function serve(){
const neww = document.getElementById('add')
let text = document.getElementById('todotext').value
if(text.trim().length === 0){
alert("Field is empty");
}else{
const a = document.createElement('li')
a.innerText = text
neww.appendChild(a)
document.getElementById('todotext').value = ""
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>To Do List</h1>
<form>
<input autocomplete="off" autofocus id="todotext"
type="text">
<input onclick="serve(); return false" type="submit">
</form>
<ol id="add"></ol>
</body>
</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.