Get Items from Textbox to Display after clicking submit

Get Items from Textbox to Display after clicking submit - javascript

I am trying to get information that I type into a textbox to display in the unordered list I have in my code to the browser. I am also trying to have it display a message after I input 5 items. Please see my code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-4</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-4
</h1>
</header>
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
var i = 1;
var listItem = "";
function processInput() {
if (i <= 5) {
listIem = document.getElementById("item" + i).innerHTML = i;
}
}
if (window.addEventListener) {
window.addEventListener("click", processInput, false);
} else if (window.attachEvent) {
window.attachEvent("onclick", processInput);
}
</script>
</body>
</html>

This:
function processInput() {
if (i <= 5) {
listIem = document.getElementById("item" + i).innerHTML = i;
}
}
Should be this:
function processInput() {
if (i <= 5) {
document.getElementById("item" + i).textContent = document.getElementById("toolBox").value;
i++; // increment i here
}
}
Or this (if you want things to be separated):
function processInput() {
if (i <= 5) {
var listItem = document.getElementById("item" + i);
var input = document.getElementById("toolBox");
listItem.textContent = input.value;
i++; // increment i here
}
}
Use .textContent instead of .innerHTML and get the #toolBox input value using .vlaue.
Note: it will be better if you could generate the list items dynamically (check how here).

Related

The cursor is not moving from one input to the next by pressing an Enter button in JavaScript

I want the cursor to move from one input to the next only when the enter button is pressed. And when it reaches the last input, I want it to move it to the first input again (like a loop). The problem is with this JavaScript code. I have generated it using OpenAI Playground.
Is adding event listeners to buttons necessary in this case? If so, how to call this code in input fields?
var inputs = document.querySelectorAll("input");
inputs.forEach(input => {
input.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
var nextInput = inputs[inputs.indexOf(e.target) + 1];
if (nextInput) {
nextInput.focus();
}
}
})
});
The complete html is here:
<!DOCTYPE html>
<html>
<head>
<title>
Inserting meaning
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#one
{
margin-left:auto;
margin-right:auto;
width:90%;
}
</style>
</head>
<body>
<script>
var inputs = document.querySelectorAll("input");
inputs.forEach(input => {
input.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
var nextInput = inputs[inputs.indexOf(e.target) + 1];
if (nextInput) {
nextInput.focus();
}
}
})
});
</script>
<div align ="center">
<h1>
Meaning In Sentence
</h1>
<div>
<h3>
Sentence:
</h3>
<input type="text" id="sentence" class="form-control" style="width:80%" placeholder="Enter the sentence">
</div>
<br>
<h3>
Difficult Word:
</h3>
<input type="text" id="word" class="form-control" style="width:80%" placeholder="Enter the difficult word">
<br>
<h3>
Meaning:
</h3>
<input type="text" id="meaning" class="form-control" style="width:80%" onchange="func()" placeholder="Enter the meaning">
<br>
</div>
<br>
<div class="h5" align = "center" id="modifiedsentence" onchange="func()">
<div>
<script>
function func()
{
var s=document.getElementById("sentence").value.replace(/['"]+/g, '');
var w=document.getElementById("word").value;
var m=document.getElementById("meaning").value;
s=s[0].toUpperCase()+s.slice(1);
var f=s.replace(w,w+" ("+m+") ")+"<br>"+
document.getElementById("modifiedsentence").innerHTML;
document.getElementById("modifiedsentence").innerHTML = f.toString();
document.getElementById("sentence").value = " ";
document.getElementById("word").value = " ";
document.getElementById("meaning").value = " ";
mvCursor();
// console.log(f);
}
</script>
</div>
</body>
</html>

Adding to bee zero's answer above:
You can check for the last input element and when return key is pressed reaches the last input element, you can focus to in zeroth index.
const nextinputIndex = index < (inputs.length - 1) ? (index + 1) : 0;
Test snippet:
<html>
<head>
<title>
Inserting meaning
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#one
{
margin-left:auto;
margin-right:auto;
width:90%;
}
</style>
</head>
<body>
<div align ="center">
<h1>
Meaning In Sentence
</h1>
<div>
<h3>
Sentence:
</h3>
<input type="text" id="sentence" class="form-control" style="width:80%" placeholder="Enter the sentence">
</div>
<br>
<h3>
Difficult Word:
</h3>
<input type="text" id="word" class="form-control" style="width:80%" placeholder="Enter the difficult word">
<br>
<h3>
Meaning:
</h3>
<input type="text" id="meaning" class="form-control" style="width:80%" onchange="func()" placeholder="Enter the meaning">
<br>
</div>
<br>
<div class="h5" align = "center" id="modifiedsentence" onchange="func()">
<div>
</div>
<script>
function func()
{
var s=document.getElementById("sentence").value.replace(/['"]+/g, '');
var w=document.getElementById("word").value;
var m=document.getElementById("meaning").value;
s=s[0].toUpperCase()+s.slice(1);
var f=s.replace(w,w+" ("+m+") ")+"<br>"+
document.getElementById("modifiedsentence").innerHTML;
document.getElementById("modifiedsentence").innerHTML = f.toString();
document.getElementById("sentence").value = " ";
document.getElementById("word").value = " ";
document.getElementById("meaning").value = " ";
// mvCursor(); REMOVING AS THIS IS NOT DEFINED
// console.log(f);
}
var inputs = document.querySelectorAll("input");
inputs.forEach((input, index) => {
input.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
const nextinputIndex = index < (inputs.length - 1) ? (index + 1) : 0;
var nextInput = inputs[nextinputIndex];
if (nextInput) {
nextInput.focus();
}
}
})
});
</script>
</body>
</html>

You can use the index param in forEach to grasp the index.
inputs.forEach((input, index) => { // HERE grab the index
input.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
var nextInput = inputs[index + 1]; // // HERE use the index
if (nextInput) {
nextInput.focus();
}
}
})
});
Complete snippet to test:
<html>
<head>
<title>
Inserting meaning
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#one
{
margin-left:auto;
margin-right:auto;
width:90%;
}
</style>
</head>
<body>
<div align ="center">
<h1>
Meaning In Sentence
</h1>
<div>
<h3>
Sentence:
</h3>
<input type="text" id="sentence" class="form-control" style="width:80%" placeholder="Enter the sentence">
</div>
<br>
<h3>
Difficult Word:
</h3>
<input type="text" id="word" class="form-control" style="width:80%" placeholder="Enter the difficult word">
<br>
<h3>
Meaning:
</h3>
<input type="text" id="meaning" class="form-control" style="width:80%" onchange="func()" placeholder="Enter the meaning">
<br>
</div>
<br>
<div class="h5" align = "center" id="modifiedsentence" onchange="func()">
<div>
</div>
<script>
function func()
{
var s=document.getElementById("sentence").value.replace(/['"]+/g, '');
var w=document.getElementById("word").value;
var m=document.getElementById("meaning").value;
s=s[0].toUpperCase()+s.slice(1);
var f=s.replace(w,w+" ("+m+") ")+"<br>"+
document.getElementById("modifiedsentence").innerHTML;
document.getElementById("modifiedsentence").innerHTML = f.toString();
document.getElementById("sentence").value = " ";
document.getElementById("word").value = " ";
document.getElementById("meaning").value = " ";
// mvCursor(); REMOVING AS THIS IS NOT DEFINED
// console.log(f);
}
var inputs = document.querySelectorAll("input");
inputs.forEach((input, index) => {
input.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
var nextInput = inputs[index + 1];
if (nextInput) {
nextInput.focus();
}
}
})
});
</script>
</body>
</html>

Probably need to make a little loop to find the next input.
var nextInput = e.target.nextElementSibling;
var found = false;
while (nextInput) {
if (nextInput.classList.contains("form-control")) {
found = true;
break;
}
nextInput = nextInput.nextElementSibling
}

Making a pop up on text highlight

I've been looking around this morning and nothing seems to be working I am trying to make something like notion has where when you highlight text in a text area a pop-up will show where you can edit text. I can sort out the functionality of the buttons in the box but I don't know what I should use to trigger a sort of on highlight event to pop up this box in a position relative to the highlight. I linked the notion reference my site and my HTML code so far.
Notion Refrence
My Current Site
<!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>Study App</title>
<link rel="stylesheet" href="study.css" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<script src="study.js"></script>
<div class="dropdown">
<nav><label for="touch"><span>Settings</span></label>
<input type="checkbox" id="touch"/>
<ul class="slide">
<li><a><div class="dark"><button onclick="myFunction()">
<input class="toggle" type="checkbox"/></button></div></a></li>
<li></li>
</ul>
</nav>
</div>
</div>
<div class="arrowdown">
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle-right dropdown"></i></button>
<div class="pages">
Add Page</div>
</div>
</div>
<script type="text/javascript">
var checkBox = document.getElementById("myCheckbox");
function rotateElem() {
if (checkBox.checked == false)
{
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
}
else {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform= 'rotate(0deg)';
}
}
</script>
<div class="tabs"></div>
<div class="sidebar">
<div class="sidebar-top">
<h1><span class="study">Study</span><span class="app">App</span></h1>
</div>
<div class="side-title">
<textarea class="longInput" spellcheck="true" placeholder="Untitled" cols="5" rows="1"></textarea>
</div>
<div class="title">
<textarea class="longInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1"></textarea>
</div>
<div class="textbox">
<textarea class="shortInput" spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
</div>
<script>
let value = ''
const elements = document.querySelectorAll('.longInput')
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('change', handleChange)
elements[i].addEventListener('keyup', handleChange)
}
function handleChange(e) {
value = e.target.value
for (let i = 0; i < elements.length; i++) {
elements[i].value = value
}
}
</script>
<script type="text/javascript">
$('.pages').hide();
$(document).ready(function(){
$('#myCheckbox').click(function(){
$('.pages').slideToggle();
});
});
</script>
<script src="study.js"></script>
</body>
</html>

Have a look at this code
if (!window.x) {
x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
var t = '';
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) {
t = document.selection.createRange().text;
}
return t;
}
var pageX;
var pageY;
$(document).ready(function() {
$(document).bind("mouseup", function() {
var selectedText = x.Selector.getSelected();
if(selectedText != ''){
$('ul.tools').css({
'left': pageX + 5,
'top' : pageY - 55
}).fadeIn(200);
} else {
$('ul.tools').fadeOut(200);
}
});
$(document).on("mousedown", function(e){
pageX = e.pageX;
pageY = e.pageY;
});
});
Find here a working demo!
Codepen.io

I am having trouble pushing data to another HTML page

I cannot get my values to go to another html page. I validated the fields and after the fields are filled and we click save the data doesnt go to the new html.
In the new html only Welcome is displayed.
This is the first HTML where we put out name
function parse() {
var n = document.getElementById("nam").value;
localStorage.setItem("textvalue", n);
return false;
}
function validations(form) {
function trimfield(str) {
return str.replace(/^\s+|\s+$/g, '');
}
var errors = [];
var n = document.getElementById("nam").value;
if (n == "") {
errors.push("Enter Name \n");
}
if (errors.length > 0) {
var msg = "Errors : \n\n";
for (var i = 0; i < errors.length; i++) {
msg = msg + errors[i];
}
alert(msg);
return false;
}
}
<!DOCTYPE HTML >
<html>
<head>
<title> User Registration Page</title>
<link href="UserRegistration.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<form action="UserInfo.html" method="POST" onsubmit="return validations(this);" onsubmit="return parse();">
<div class="name">
Name : <input type="text" id="nam" name="fullName">
</div>
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>
</body>
</html>
This is the second html that i am having trouble displaying my Name(UserInfo.html)
<html>
<body>
Welcome : <span id= "result"> </span>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
</body>
</html>

Don't use two onsubmit attributes. Aggregate all your functions inside one and then perform it. I've merged the parse function with the validations. It's the same thing. Also, you never submitted your form. That's why the functions also don't get triggered. Use a submit button too. It should be inside the form tag. Not outside
<!DOCTYPE HTML >
<html>
<head>
<title> User Registration Page</title>
<link href="UserRegistration.css" rel= "stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script>
function trimfield(str) {
return str.replace(/^\s+|\s+$/g,'');
}
function validations(form) {
var errors = [] ;
var n = document.getElementById("nam").value;
if (n == "") {
errors.push("Enter Name \n");
}
if (errors.length > 0) {
var msg = "Errors : \n\n" ;
for (var i = 0 ; i<errors.length; i++ ){
msg = msg + errors[i];
}
alert(msg);
}else{
localStorage.setItem("textvalue", n);
alert(localStorage.getItem("textvalue"));
return false;
}
}
</script>
</head>
<body>
<form action="UserInfo.html" method="POST" onsubmit="validations(this);">
<div class = "name" >
Name : <input type ="text" id="nam" name="fullName" >
</div>
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>
</body>
</html>
Also, no idea where you are calling trimfield. Declare it outside any other functions and use it wherever you want.

I tried to fix every mistakes you have made :
function parse() {
var n = document.getElementById("nam").value;
localStorage.setItem("textvalue", n);
return true;
}
function validations(form) {
function trimfield(str) {
return str.replace(/^\s+|\s+$/g, '');
}
var errors = [];
var n = document.getElementById("nam").value;
if (n == "") {
errors.push("Enter Name \n");
}
if (errors.length > 0) {
var msg = "Errors : \n\n";
for (var i = 0; i < errors.length; i++) {
msg = msg + errors[i];
}
alert(msg);
return false;
}
return true;
}
the html :
<!DOCTYPE HTML >
<html>
<head>
<title> User Registration Page</title>
<link href="UserRegistration.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<form action="UserInfo.html" method="POST" onsubmit="if(validations(this)) return parse(); else return false;">
<div class="name">
Name : <input type="text" id="nam" name="fullName" />
</div>
<button type="submit" class="btn btn-primary btn-lg">Save</button>
</form>
</body>
</html>

How do I remove a to do list item after it is added

I really tried everything, almost every function in JS. But I cannot remove the list item from the to-do list once it is added. I have tried adding event listeners, onclick=" " etc but nothing works. Can someone please look at my code and tell me what I am doing wrong. Thank You, any help is much appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta charset="UTF-8">
<title>To-Do-List</title>
</head>
<body>
<div class="container">
<div id="header">
<h1>My To Do List</h1>
</div>
<form autocomplete="off">
<input type="text" id="task" placeholder="Title...">
</form>
<button id="addTask">Add</button>
</div>
<br><br>
<div id="tasks">
<ul id="myUL">
</ul>
</div>
</div>
</div>
<script>
var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);
function boxChecked(event){
const element = event.target;
if(element.type === "close"){
delete element;
}
}
</script>
</body>
</html>
JS:
$(document).ready(function(){
document.getElementById('addTask').addEventListener("click", function(){
var task = document.getElementById('task').value;
if(task == ""){
alert("You Must Enter A Value!");
}else{
document.getElementById('myUL').innerHTML += '<li>' + task + '</li>' + '<button class="close" >&#10007</button>' + '<br><br>' + '<button class="check" >✓</button>' + '<br><br>';
}
var button = document.querySelectorAll('.close');
for(var i = 0; i < button.length;i++){
button[i].addEventListener("click", function(){
this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this);
});
}
var check = document.querySelectorAll('.check');
for(var i = 0; i < check.length;i++){
check[i].addEventListener("click", function(){
this.parentNode.style.textDecoration = "line-through";
});
}
});
});

Don't try to concatenate innerHTML strings when you have listeners attached to elements inside, else the listeners will be lost. Instead, append elements properly with appendChild.
delete element won't actually do anything, because element is a variable, not a property of an object - try using .remove() instead, to remove the li (and put the button inside the li so that the HTML is valid).
var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);
function boxChecked(event) {
const element = event.target;
if (element.className === "close") {
element.parentElement.remove();
}
}
document.getElementById('addTask').addEventListener("click", function() {
var task = document.getElementById('task').value;
if (task === "") return alert("You Must Enter A Value!");
const li = list.appendChild(document.createElement('li'));
li.textContent = task;
const button = li.appendChild(document.createElement('button'));
button.className = 'close';
button.textContent = '✗';
});
.close {
position: absolute;
left: 150px;
}
<div class="container">
<div id="header">
<h1>My To Do List</h1>
</div>
<form autocomplete="off">
<input type="text" id="task" placeholder="Title...">
</form>
<button id="addTask">Add</button>
</div>
<br><br>
<div id="tasks">
<ul id="myUL">
</ul>
</div>

Your .querySelectorAll() simply needs to target .close rather than close. In addition to this, you'll probably want to target the close button's parent (the item itself), with .parentNode. Note that you probably don't want to hide it, but rather actually simply remove both the <li> and the close icon, so that you can add more items after removal of the item(s). This can be done with:
this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this);
And can be seen working in the following:
var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);
function boxChecked(event) {
const element = event.target;
if (element.type === "close") {
delete element;
}
}
$(document).ready(function() {
document.getElementById('addTask').addEventListener("click", function() {
var task = document.getElementById('task').value;
if (task == "") {
alert("You Must Enter A Value!");
} else {
document.getElementById('myUL').innerHTML += '<li>' + task + '</li>' + '<button class="close" >&#10007</button>' + '<br><br>';
}
var button = document.querySelectorAll('.close');
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function() {
this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this);
});
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta charset="UTF-8">
<title>To-Do-List</title>
</head>
<body>
<div class="container">
<div id="header">
<h1>My To Do List</h1>
</div>
<form autocomplete="off">
<input type="text" id="task" placeholder="Title...">
</form>
<button id="addTask">Add</button>
</div>
<br><br>
<div id="tasks">
<ul id="myUL">
</ul>
</div>
</body>
</html>
Also note that your stylesheet is missing a closing ", and you have two additional closing </div> that don't match anything in your above code.

How to make "Search FIlter" Searches in the new Created Elements By the "innerHTML" code?

I am creating a website that allows the user to create a contact, and there is a search box that allows the user to search in the created contacts.
The problem is when the user creates contact and searches, the search box does not work.
The code is running well when I create the contacts manually in the HTML file. It means that the search box only searches in the HTML file, and doesn't search in the newly created contacts by the innerHTML code by JavaScript.
And please answer me with JAVASCRIPT code, not jQuery.
This is my code, only HTML and JAVASCRIPT , no css :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>
Javascript code:
//CREATE NEW CONTACT
//CREATE NEW LI I MEAN
document.getElementById('myForm').addEventListener('submit', createContact)
function createContact(e) {
//input
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var demo = document.getElementById('demo');
demo.innerHTML +=
'<li class=menuItem>' + newName + '</li>';
e.preventDefault();
}
//Search Filter
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
function filter() {
var ul = document.getElementById('names');
var li = ul.querySelectorAll('li.menuItem');
var searchBoxValue = document.getElementById('search').value.toUpperCase();
for (var i = 0; i < li.length; i++) {
var newName = document.getElementById('create').value;
var a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>

You append new items to <div id="demo"> instead of <ul id="names">. It should be like this:
var names = document.getElementById('names');
names.innerHTML += '<li class="menuItem">' + newName + '</li>';
//CREATE NEW CONTACT
//CREATE NEW LI I MEAN
document.getElementById('myForm').addEventListener('submit', craeteContact)
function craeteContact(e) {
//input
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var names= document.getElementById('names');
names.innerHTML +=
'<li class="menuItem">' + newName + '</li>';
e.preventDefault();
}
//Search Filter
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
function filter() {
var ul = document.getElementById('names');
var li = ul.querySelectorAll('li.menuItem');
var searchBoxValue = document.getElementById('search').value.toUpperCase();
for (var i = 0; i < li.length; i++) {
var newName = document.getElementById('create').value;
var a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(searchBoxValue) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>

it's because you place li elements in #demo instead of #names
you should use console.log() to debug

Use an array to save names and then search the array. why you get data from UI everytime
var searchBox = document.getElementById('search');
searchBox.addEventListener('keyup', filter);
document.getElementById('myForm').addEventListener('submit', craeteContact)
var names = [];
function craeteContact(e) {
var menuItem = document.getElementById('menuItem');
var newName = document.getElementById('create').value;
var demo = document.getElementById('demo');
names.push(newName.toUpperCase()); // add new name to array
demo.innerHTML += '<li class=menuItem>' + newName + '</li>';
e.preventDefault();
}
function filter() {
var searchValue = searchBox.value.toUpperCase();
for (var i = 0; i < names.length; i++) {
if (names[i].indexOf(searchValue) > -1) {
console.log("found");
}
else {
console.log("not found");
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript Project 11</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="myForm">
<input id="create" type="text" placeholder="create">
<button id="btn" type="submit">Submit</button>
</form>
<br>
<input id="search" placeholder="search..." type="text">
<div id="demo">
<!--HERE IS YOUR LIST OF CONTACTS-->
<ul id="names">
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Get Items from Textbox to Display after clicking submit - javascript

Related

The cursor is not moving from one input to the next by pressing an Enter button in JavaScript

Making a pop up on text highlight

I am having trouble pushing data to another HTML page

How do I remove a to do list item after it is added

How to make "Search FIlter" Searches in the new Created Elements By the "innerHTML" code?

Categories

Resources