Edit: problem solved! Credits to #Thennarasan and #SiamakFerdos ,you have my deep gratitude!
Tips: when you are not sure if you get the value you intended to, try using
console.log(your intended value)
to check for it!
I am working on project and I need to pass a table from one html to another.
Whole process:
I want to create a html file to accept a number from the user as an input to produce a multiplication table.
Create an external javascript file that should have a function to generate the multiplication table.
Javascript function should contain array variables and loops to perform the operation.
Use appropriate user message using alert method.
Call the function when the user hits Generate Table button and forward results to another html page.
The following is what I have so far:
//This is the Calculation.js
function DisplayTable() {
var baseNumber = parseInt(document.getElementById("baseNumber").value);
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var createMultTable = "<table border='1'>"
document.write(createMultTable);
//This will create the table
//First column is user input, second column is multplier from 1 to 10, third column is results.
for (var row = 0; row < 10; row++) {
document.write('<tr>' + '</tr>');
document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>');
}
createMultTable += "</table>";
document.write(createMultTable);
}
document.getElementById("newTable").innerHTML = createMultTable;
<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication Table</title>
<link rel="stylesheet" href="Style.css" />
<script src="modernizr.custom.05819.js"></script>
<script type="text/javascript" src="Calculation.js"></script>
</head>
<body>
<header>
Multiplication Table
</header>
<article>
<h2>Multiplication Table</h2>
<form method="link" id="newTable" action="TableGetter.html">
Enter a number:
<input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!">
<br>
<!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> -->
<button type="button" name="button" onclick="DisplayTable();">Generate Table</button>
</form>
</article>
</body>
</html>
I am struggling at figuring out how to forward the result to TableGetter.html. I need help on writing the TableGetter.html as well as passing the table to TableGetter.html when I click Generate Table button in Input.html
Deep gratitude!
On TableGetter.html:
<script>
(function() {
document.getElementById("newTable").innerHTML = localStorage.getItem("table_html");
})();
</script>
And change your DisplayTable function:
function DisplayTable() {
var baseNumber = parseInt(document.getElementById("baseNumber").value);
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var createMultTable = "<table border='1'>"
document.write(createMultTable);
//This will create the table
//First column is user input, second column is multplier from 1 to 10, third column is results.
for (var row = 0; row < 10; row++) {
document.write('<tr>' + '</tr>');
document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>');
}
createMultTable += "</table>";
localStorage.setItem("table_html", createMultTable);//ADD THIS LINE****
var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL
window.location.href = url;
}
We need to make couple of changes, please exactly copy paste and check.
calculation.js
function DisplayTable() {
var baseNumber = parseInt(document.getElementById("baseNumber").value);
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var createMultTable = "<table border='1'>"
document.write(createMultTable);
//This will create the table
//First column is user input, second column is multplier from 1 to 10, third column is results.
for (var row = 0; row < 10; row++) {
createMultTable += '<tr><td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td></tr>';
}
createMultTable += "</table>";
localStorage.setItem("table_html", createMultTable);//ADD THIS LINE****
var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL
window.location.href = url;
}
if (window.location.pathname == "/C:/Users/Thennarasan/Desktop/js/TableGetter.html"){
var data = localStorage.getItem("table_html");
document.getElementById("newTable").innerHTML = data;
}
Note change the window.location.pathname of what you have.
input.html
<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication Table</title>
<link rel="stylesheet" href="Style.css" />
<script src="modernizr.custom.05819.js"></script>
<script type="text/javascript" src="Calculation.js"></script>
</head>
<body>
<header>
Multiplication Table
</header>
<article>
<h2>Multiplication Table</h2>
<form method="link" id="newTable" action="TableGetter.html">
Enter a number:
<input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!">
<br>
<!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> -->
<button type="button" name="button" onclick="DisplayTable();">Generate Table</button>
</form>
</article>
</body>
</html>
TableGetter.html
<!DOCTYPE html>
<html>
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiplication Table</title>
<link rel="stylesheet" href="Style.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
Multiplication Table
</header>
<article>
<h2>Multiplication Table</h2>
<div id="newTable"></div>
</article>
<script type="text/javascript" src="Calculation.js"></script>
</body>
</html>
Run it, it will work as expected.
Related
Upon clicking the button it displays an alert from the input value + a custom string.
My issue is that after clicking the button and changing the input value, clicking the button again displays the old value instead of the new.
Javascript
function test() {
var message = document.getElementById("name").value;
var newMessage = message + " " + "HELLO!";
document.getElementById("send").addEventListener("click", function (e) {
e.stopImmediatePropagation();
alert(newMessage);
console.log(newMessage);
});
}
HTML
<!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="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Greet your friend</title>
</head>
<body>
<label class="main">Enter the name of your friend you want to greet</label>
<input class="main" type="text" name="name" id="name" value="George">
<button class="main" id="send" onclick=test()>DONE</button>
</body>
</html>
You had uncountable syntax problems which I fixed them. You don't need to use stopImmediatePropagation here.
function test() {
var message = document.getElementById("name").value;
var newMessage = message + " " + "HELLO!";
// -- You don't need a new variable to apply them --
// message += " " + "HELLO!";
// -- Or this one which is better and newer. Called 'String Literals' --
// message = `${message} HELLO!`;
alert(newMessage);
console.log(newMessage);
};
<label class="main">Enter the name of your friend you want to greet</label>
<input class="main" type="text" id="name" />
<button class="main" id="send" onclick="test()">DONE</button>
I'm working on a todo website called Notekeeper+. It has a edit mode toggle, so there is view mode and edit mode, however when I put it in edit mode, my input element does not appear. This makes no sense because this website starts in edit mode, and the input shows. I have compared the website when it started to the website when I put it in edit mode after putting it in view mode and it is the same.
Javascript:
editMode = true;
items = 1
function toggleEditMode() {
console.log(editMode)
if (editMode == true) {
editMode = false
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + ">"
}
}
}
HTML (in edit mode):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Notekeeper+</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/script.js"></script>
<div class="bar">
<h2>Notekeeper+</h2>
</div>
<button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
<button class="right">+task</button>
<button class="right">+note</button>
<div class="grid-container">
<div id="item1"><input type="text" id="itemTitle1" value="New Note"></input></div>
</div>
</body>
</html>
Full code can be found at https://repl.it/#UCYT5040/Notekeeper. Feel free to fork that repl for testing.
You are missing 2 semicolons and a quotation 😛, although to be frank, the semicolons weren't strictly necessary, so you were just missing an ending quote for the value attribute.
editMode = true;
items = 1
function toggleEditMode() {
if (editMode == true) {
editMode = false;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "\">"
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Notekeeper+</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/script.js"></script>
<div class="bar">
<h2>Notekeeper+</h2>
</div>
<button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
<button class="right">+task</button>
<button class="right">+note</button>
<div class="grid-container">
<div id="item1"><input type="text" id="itemTitle1" value="New Note">
</div>
</body>
</html>
These types of errors are usually why I prefer using document.createElement(tagName) and setAttribute(name, value) rather than directly modifying HTML.
I have a table whose tr needs to be repeat by rendering the value inside td. The values of td comes from get api call using foreach loop. I have already tried to render but my tbody is not coming inside the table. I want it to create using only javascript, no jquery.Here is the code below
var container = document.getElementById("container");
var url = "http://dummy.restapiexample.com/api/v1/employees";
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
container.innerHTML = '<div class="container"><h2>Basic Table</h2><p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p><table class="table"><thead><tr><th>ID</th><th>Firstname</th></tr></thead>'
data.data.forEach(function(count) {
console.log(count);
container.innerHTML += '<tbody><tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr></tbody>';
})
}).catch(function() {
console.log("Booo");
});
container.innerHTML = '</table></div>'
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
</div>
Make a table and tbody since start and insert rows with forEach
var container = document.getElementById("container");
var url = "http://dummy.restapiexample.com/api/v1/employees";
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
data.data.forEach(function(count) {
console.log(count);
let tableBody = document.getElementById("tableBody");
tableBody.innerHTML += '<tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr>';
})
}).catch(function() {
console.log("Booo");
});
container.innerHTML = '</table></div>'
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>ID</th><th>Firstname</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
const root = document.getElementById("root");
const data = [{id:1, name:'kashif'}];
data.forEach((e) => {
root.innerHTML += `<td> ${e.id} </td><td> ${e.name} </td>`;
});
<table>
<thead>
<td>id</td><td>name</td>
</thead>
<tbody id="root"></tbody>
</table>
I am trying to make a basic to do application.
Here is what I have done so far;
When the user clicks a button a prompt appears asking the user to enter a task.
The task will then be stored in an array
I have displayed the array in the console. However, I am having trouble displaying the array on the web page:
var toDoItems = [];
var parsed = "";
document.getElementById("addItem").onclick = function() {
var userInput = prompt("Enter your Todo: ")
toDoItems.push = userInput;
console.log(toDoItems);
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>To Do List</title>
</head>
<body>
<h1>My Tasks</h1>
<button id="addItem">Add item</button>
<div id="item-list">
</div>
<script src="js/script.js"></script>
</body>
</html>
The first thing is you need to use Array.push() and not Array.push = someVal. Then you can loop over to the values and create a list of elements in the HTML:
var toDoItems = [];
var parsed = "";
document.getElementById("addItem").onclick = function() {
var nHTML = '';
var userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
toDoItems.forEach(function(item) {
nHTML += '<li>' + item + '</li>';
});
document.getElementById("item-list").innerHTML = '<ul>' + nHTML + '</ul>'
}
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>To Do List</title>
</head>
<body>
<h1>My Tasks</h1>
<button id="addItem">Add item</button>
<div id="item-list">
</div>
<script src="js/script.js"></script>
</body>
You can use map() to map over the toDoItems and convert each items to html code and then use join() to combine the array into one string of HTML code.
Like this:
const HTML = toDoItems.map( item => `<li>${item}</li> ` ).join('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'
Edit: Fixed typo (should be join, not joint)
Loop over toDoItems, create a <p> tag and append it to #item-list:
toDoItems.forEach((item) => {
let p = document.createElement('p');
p.innerText = item;
document.querySelector('#item-list').appendChild(p);
});
You can use innerHTML for this
document.getElementById("item-list").innerHTML += "<p>" +userInput+"</p>";
demo : plunker
Check below I think this may help you
I removed style from your code for my convenience
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>To Do List</title>
<script>
function myFunction(){
var toDoItems = [];
var parsed ="";
var userInput = prompt("Enter your Todo: ")
toDoItems.push = userInput;
document.getElementById("item-list").innerHTML=userInput;
console.log(toDoItems);
}
</script>
</head>
<body>
<h1>My Tasks</h1>
<button id="addItem" onclick="myFunction()">Add item</button>
<div id="item-list">
</div>
</body>
</html>
The Code above has an drawback: It erases the old value of userInput when you enter a new value in prompt().
I propose:
document.getElementById("item-list").innerHTML +=userInput+"";
Vu
i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>