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
Related
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
}
I am making a note-taking app and I want 2 text areas to when you type in one the other changes to
what you are doing in one. I want so when I change the title of the page it will change in other places on the page. I'll provide my current code what my page looks like (I want the change to be with my Unititled and an area next to the dropdown arrow) and what I want it to do, I've tried change and input events and I can't seem to figure it out.[My Current Site][1]
What I Want - https://share.vidyard.com/watch/Wj6uTmEiB9LR8iiZy7sVf9
[1]: https://i.stack.imgur.com/3vzEB.png
<!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="title">
<textarea id="shortInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1">
</textarea>
</div>
<div class="textbox">
<textarea id="longInput" spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
</div>
<script type="text/javascript">
$('.pages').hide();
$(document).ready(function() {
$('input').click(function() {
$('.pages').slideToggle();
});
});
</script>
<script src="study.js"></script>
</body>
</html>
One possible approach would be to store the synchronised value in a variable, and add event listeners to each element for any changes. Then update the value of each element with the new value when the change occurs.
// Store the synchronised content
let value = ''
// Add change listeners to each element
const elements = document.querySelectorAll('.synced')
for (let i = 0; i < elements.length; i++) {
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements[i].addEventListener('change', handleChange)
elements[i].addEventListener('input', handleChange)
elements[i].addEventListener('keyup', handleChange)
}
// When a change occurs, set the value of all the synchronised elements
function handleChange(e) {
value = e.target.value
for (let i = 0; i < elements.length; i++) {
elements[i].value = value
}
}
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
jQuery version:
// Store the synchronised content
let value = ''
// Get all the of the relevant elements
const elements = $('.synced')
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements.on('change input keyup', function() {
value = $(this).val()
elements.val(value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
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" >✗</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" >✗</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.
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>
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).