How to make the function of adding new sections and subsections work on the created sections.
'use strict';
const btnNewChapter = document.querySelector('.btn-new-chapter');
const btnAddChapter = document.querySelector('.btn-add-chapter');
const btnAddSubChapter = document.querySelector('.btn-add-sub-chapter');
const main = document.querySelector('.main');
const mainBody = document.querySelector('.main-body');
const chapterListBody = document.querySelector('.chapter-list-body');
let appData = [];
btnNewChapter.addEventListener('click', function(){
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter">Add Body Text</button>' +
'<button class="btn-add-sub-chapter">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
})
btnAddChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
});
btnAddSubChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<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>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<ol class="main-body">
<ul class="chapter-list">
<li class="chapter-list-title">
<div class="data">
<h1 class="title">
<input type="text" class="chapter-title" placeholder="Chapter Title">
</h1>
<button class="btn-add-chapter">Add Body Text</button>
<button class="btn-add-sub-chapter">Add SubBody Text</button>
</div>
</li>
</ul>
<ul class="chapter-list-body">
<li class="chapter-list-text">
<div class="chapter">
<input type="text" class="chapter-text" placeholder="Chapter Body">
</div>
</li>
<!-- <li class="sub-chapter-list-text">
<div class="subchapter">
<input type="text" class="sub-chapter-text" placeholder="Тело Подраздела">
</div>
</li> -->
</ul>
</ol>
<script src="/scripts/script.js"></script>
</body>
</html>
Next I am going to add button "Save Data", what will add inputs value and chapters to local storage and "remove" button, what will remove chapters, subchapters or titles from local storage and update the page?
In your code you're creating the event listeners before you insert the HTML.
That way your listeners can't be attached to those new items.
You also can't just re-run the event listener after you added the HTML or the events will stack up on the already added HTML resulting in duplication of functionality.
What I did here is I added a counter variable that keeps track of what event goes where.
I also removed the HTML from you HTML file and re-used the same function again for the very first run. That way you don't have the HTML in your code twice.
You don't have to use a counter. You could also use a class you add or remove to keep track of what already has the event but I thought this was the easiest to explain.
'use strict';
const main = document.querySelector('.main');
let counter = 0;
function addChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addSubChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addNewChapterHtml() {
counter ++;
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter counter' + counter + '">Add Body Text</button>' +
'<button class="btn-add-sub-chapter counter' + counter + '">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body counter' + counter + '">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
// after adding the HTML into your DOM we attach the event listeners to those new buttons
document
.querySelector(`.btn-add-chapter.counter${counter}`)
.addEventListener('click', () => addChapterHtml(counter));
document
.querySelector(`.btn-add-sub-chapter.counter${counter}`)
.addEventListener('click', () => addSubChapterHtml(counter));
}
// this event listener can be added right now since the button is in the HTML already
document
.querySelector('.btn-new-chapter')
.addEventListener('click', addNewChapterHtml);
// Now let's use the functions we created above to add the first sections
addNewChapterHtml();
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<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>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<script src="/scripts/script.js"></script>
</body>
</html>
Related
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">
<title>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>
<script src="todojs.js"></script>
</body>
</html>
JAVASCRIPT
document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li = '<li id="item">' + doIt + '<button type="button" id="clearOne">X</button>' + '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
document.getElementById('clearList').onclick = function() {
const ul = document.getElementById('list');
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
}
document.getElementById('clearOne').onclick = function () {
const currentLi = document.getElementById('item');
currentLi.removeChild();
}
}
SO im putting a X next to each to do and i want to be able to remove the one LI element when the user presses the X but i keep failing i tried multiple things cants figure it out
I think this what you are looking for.
document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
// create li element.
const li = document.createElement('li');
li.innerText = doIt;
// create remove button.
const removeButton = document.createElement('button');
// Set text of remove button
removeButton.innerText = 'X';
// Add event listener for the remove button.
removeButton.addEventListener('click', function() { this.parentNode.remove() } )
// append the button inside the li element
li.append(removeButton);
// prepend the li element in the list.
document.getElementById('list').prepend(li);
document.getElementById('toDo').value = '';
document.getElementById('clearList').onclick = function() {
const ul = document.getElementById('list');
ul.innerHTML = '';
}
}
<!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>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button>
<button type="button" id="clearList">Clear List</button>
<br>
<ul id="list"></ul>
<script src="todojs.js"></script>
</body>
</html>
An easy way would be:
function remove(el) {
el.parentElement.remove();
}
document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li = '<li id="item">' + doIt + '<button type="button" onClick="remove(this)" id="clearOne">X</button>' + '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
}
First of all,
You should not use the same id for multiple elements. You are assigning id of "item" to every li element. So when you try to remove the element by id it will not work as expected.
Assign a unique id to every li element (you can also use unique classes or custom refs. But let's use ids).
<li id="some_unique_id">todo </li>
I think we will have to use classes and custom data attributes on the buttons to achieve what we want.
Ex: <button class="removeBtn" data-todoid="_the_corresponding_todo_id_">Remove</button>
Here we use the data-todoid attribute value to identify which li element will remove when we click this.
Let's modify your code now.
document.getElementById('myButton').onclick = function () {
// as we need some string or number to use as a unique id,
// its better to use the current timestamp in milliseconds in here.
const thiselementuniqueid = (new Date().getTime()).toString();
const doIt = document.getElementById('toDo').value;
const li = '<li id="todoitem_"+thiselementuniqueid >' + doIt + '<button type="button"
class="clearBtn" data-todoid="todoitem_"+thiselementuniqueid >X</button>' + '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
// get all the li remove buttons
var clearButtons = getElementsByClassName('clearBtn');
// write on click event action for all of them
for(var a = 0; a<clearButtons.lenth;a++){
var asinglebutton = clearButtons[a]; // selected a button
asinglebutton.onClick = function(){
let todoid = $(this).data("todoid"); // get matching todo id to be removed on click
let currentLi = document.getElementById(todoid);
currentLi.removeChild();
}
}
document.getElementById('clearList').onclick = function() {
const ul = document.getElementById('list');
ul.innerHtml = "";
}
I haven't tested this. But this is the best approach in your case.
Edit : Leonardo's above answer is much simpler, easy, and quick. Try it.
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 am trying to make a chatbox. Everything is working properly but when I click the "Start Chat" button, the alert shows "Object Object". Otherwise data fetching is perfect. I just can't see the modal chat box.
There is another almost similar example but in it the issue got solved by putting the <div id="user_model_details"></div> while that doesn't seem to be the case in this one.
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/User.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/User.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<div class="split Connect_Content" id="Connect_Cnt">
<div id="user_model_details"></div>
<script>
$(document).ready(function() {
fetch_user();
setInterval(function() {
fetch_user();
}, 5000);
function fetch_user() {
$.ajax({
url: "include/abcde.php",
method: "POST",
success: function(data) {
$('#Connect').html(data);
}
})
}
function make_chat_dialog_box(to_user_id, to_username) {
var modal_content = '<div id="user_dialog_' + to_user_id + '" class="user_dialog" title="Chat window with ' + to_username + '">';
//alert (modal_content);
modal_content += '<div style="height:30%; border:1px solid #ccc; overflow-y: scroll; margin-bottom:3%; padding:5%;" class="chat_history" data-toid="' + to_user_id + '" id="chat_history_' + to_user_id + '">';
modal_content += '</div>';
modal_content += '<div class="form-group">';
modal_content += '<textarea name="chat_message_' + to_user_id + '" id="chat_message_' + to_user_id + '" class="form-control"></textarea>';
modal_content += '</div><div class="form-group" align="right">';
modal_content += '<button type="button" name="send_chat" id="' + to_user_id + '" class="btn btn-info send_chat">Send</button></div></div>';
alert(modal_content);
var test = $('#user_model_details').html(modal_content);
alert(test);
}
$(document).on('click', '.start_chat', function() {
var to_user_id = $(this).data('toid');
var to_username = $(this).data('tousername');
//alert (to_user_id);
//alert (to_username);
make_chat_dialog_box(to_user_id, to_username);
$("#user_dialog_" + to_user_id).dialog({
autoOpen: false,
width: 400
});
$('#user_dialog_' + to_user_id).dialog('open');
});
});
</script>
</div>
Finally found the mistake in this one. Extreme silly mistake.I closed the </div> at the end of the page rather then closing it in the same line like this:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div> at end of page needs to be erased. It solved the problem. Sorry to disturb you guys.
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.
I am trying to load some data from an API into html. But it is not returning anything. My code is below. I have inspected it with developer tools but no errors. Kindly help please.
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://uapi.staging.simplestream.com//tvplayer/channels/programmes/2013-09-01/referer/tvplayer?format=json',function(data){
$('#content').empty();
$.each(data, function(entryIndex, entry){
var html = '<div class="data">';
html += '<div class="title">' + entry['title'] + '</h3>';
html += '<div class="shortDesc">' + entry['synopsis'] + '</div>';
html += '<div class="duration">' + entry['duration'] + '</div>';
$('#content').append(html);
});
});
return false;
});
</script>
</head>
<body>
<div id="content" style="width:500px; height:800px;">
<div class="ellipsis title"></div>
<div class="ellipsis shortDesc"></div>
<div class="duration"></div>
</div>
</body>
</html>