Right, so I've managed to cobble together something that sort of works in terms of a search function within my webpage, however say I search for "Amethyst" it'll group "Placeholder1" into the search as well.
There's probably something very obvious that I'm missing here, but I'll put a small snippet of the code here, not enough to re-create but it's fairly straight forward.
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);
function myFunction(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("products");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">
<div id="products" class=" w3-row w3-grayscale" style="width:100%">
<div class="w3-col l3 s6">
<a href="#"><div class="w3-container">
<div class="w3-display-container">
<img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
<div class="w3-display-middle w3-display-hover">
</div>
</div>
<p>Amethyst<br>£45.00</p>
</div></a>
<a href="#"><div class="w3-container">
<div class="w3-display-container">
<img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
</div>
</div>
<p>Placeholder1<br>£0.00</p>
</div></a>
</div>
NOTE: This is not enough code to replicate anything, but I'm fairly certain the problem lies within this code.
If there's anything else you'd need to help that I've omitted then please let me know. Thanks!
The main issue here is that you're attempting to get the value of e.target.value.toUpperCase(), which is undefined. What you actually want is the uppercased value of myInput, since that's what you'll want to find in your HTML content.
Here's a refactor of your script using querySelector with your existing HTML content that will work (and a more efficient for loop). This code will only look at the paragraph tag that contains your description.
<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);
function myFunction() {
var filter = document.getElementById("myInput").value.toUpperCase();
var paragraphs = document.querySelectorAll("#products div a p")
for (let i=0, p; p = paragraphs[i]; i++)
{
if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
{
p.parentElement.parentElement.style.display = "block";
}
else
{
p.parentElement.parentElement.style.display = "none";
}
}
}
</script>
I'm trying to set up pagination for some blog posts. It works with the first page, and I check my tests to see if the loop is actually populating the "postsToDisplay" array (which it does), but when I click the second-page button, nothing shows up. I can click the first-page button and it brings the first page of posts back up. For some reason, it won't push the new arrays to the page though.
I've tried adding and taking away tests to see what is working. The array is definitely being populated, and the loop is going through the correct "i" values just fine.
Here's some edited code to reproduce my problem:
//Use this as "scripts.js"
$(document).ready(function() {
var realBlog = document.getElementsByClassName("realBlog");
var postsPerPage = 2;
var $pagination = $(".pagination")
function showPage(page) {
$(realBlog).hide();
let postsToDisplay = [];
for (let i = 0; i < realBlog.length; i += 1) {
if (i >= page * postsPerPage && i <= page * postsPerPage + postsPerPage - 1) {
postsToDisplay.push(realBlog[i]);
console.log(i); //Test to see if the loop is running the correct numbers
$(postsToDisplay[i]).show();
}
}
console.log(postsToDisplay); //Test to see if the array is full
return postsToDisplay;
}
showPage(0);
function createPageNumbers() {
let createUl = document.createElement("ul");
createUl.className = "pageNumbers";
for (let i = 1; i <= Math.ceil(realBlog.length/2); i += 1) {
let createLi = document.createElement("li");
let createA = document.createElement("a");
createA.href = "#" + i;
createA.textContent = i;
createLi.className = "pageButton";
createLi.append(createA);
createUl.append(createLi);
$(".pagination").append(createUl);
createA.addEventListener("click", () => {
showPage(i-1);
});
}
}
createPageNumbers();
});
//Use this as index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="pagination"></div>
</body>
</html>
Page 1 should show posts 1 and 2, page 2 should show post 3.
Alright, I found the answer, and of course, it's a silly mistake. I have this little snippet: $(postsToDisplay[i]).show();
I'm not sure why I'm trying to show each 'i' when I can just show the whole array... So the fix is $(postsToDisplay).show();
I am trying to create a button using array but when i try to write text in text input and try to create a button it doesn't change the value.
function ready() {
var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];
function btns() {
var btn = $("<button>" + family[i] + "</button>")
$(btn).attr("data-search", family[i])
$(btn).appendTo("#buttons")
}
var submit = $("<button>Submit</button>");
var text = $("<input type='text' name='text'>");
$(text).appendTo("#submit");
$(submit).appendTo("#submit");
for (i = 0; i < family.length; i++) {
btns();
}
$(submit).on("click", function() {
var textBtn = text.val();
family.push(textBtn);
btns();
})
}
ready();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="buttons"></div>
</div>
<div class="row">
<div class="col-sm-3">
<div id="gif"></div>
</div>
<div class="col-sm-9">
<div id="submit"></div>
</div>
</div>
</div>
</body>
Is this what you are looking for? The code is commented to show you the steps
var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];
// for each family add a button
const buttons = family.map(el => $(`<button data-search="${el}">${el}</button>`));
$('#buttons').append(buttons);
function addButton() {
// get the value of the text input
const val = $('#button-text').val();
// if the value is not empty
if (val.trim().length) {
// create the new button and append it
const btn = $(`<button data-search="${val}">${val}</button>`);
$('#buttons').append(btn);
// add the val to the family array
family.push(val);
// add the button to the buttons array
buttons.push(btn);
// reset the input field
$('#button-text').val('');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
</div>
<div>
<input type="text" id="button-text"/>
<button onClick="addButton()">Add Button</button>
</div>
The issue with your existing code is that you have declared the variable i in your for loop, but you are not incrementing the value when you manually add the new button.
If you update your submit button click event as follows, you will accomplish what you are looking for:
$(submit).on("click", function(){
var textBtn = text.val();
family.push(textBtn);
console.log(family);
btns();
i++; // Added the increment of 'i' here.
});
However, I am sure there's a much more eloquent way of solving this problem that doesn't involve keeping track of the array index.
Few things here
You may not need to create the input and the button using js. You can create it using html only
The i in the for loop is global, put a keyword before it and then pass the family[i] to the btns function
var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];
function btns(val) {
var btn = $("<button>" + val + "</button>")
$(btn).attr("data-search", val)
$(btn).appendTo("#buttons")
}
for (let i = 0; i < family.length; i++) {
btns(family[i]);
}
$("#submitBtn").on("click", function() {
var textBtn = $("#submitIp").val();
btns(textBtn);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="buttons"></div>
</div>
<div class="row">
<div class="col-sm-3">
<div id="gif"></div>
</div>
<div class="col-sm-9">
<div id="submit">
<input type='text' id='submitIp' name='text'><button id='submitBtn'>Submit</button>
</div>
</div>
</div>
</div>
</body>
here, your loop is the main problem...you need to add element singularly
function ready(){
var family = ["demo1","demo2","demo3","demo4","demo5","demo6"];
function btns(){
var btn = $("<button>" + family[i] + "</button>");
$(btn).attr("data-search", family[i])
$(btn).appendTo("#buttons")
}
var submit = $("<button>Submit</button>");
var text = $("<input type='text' name='text'>");
$(text).appendTo("#submit");
$(submit).appendTo("#submit");
for (i=0; i < family.length; i++){
btns();
}
$(submit).on("click", function(){
var textBtn = text.val();
// family.push(textBtn);
var btn = $("<button>" + textBtn + "</button>");
$(btn).attr("data-search", textBtn)
$(btn).appendTo("#buttons")
})
}
ready();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="buttons"></div>
</div>
<div class="row">
<div class="col-sm-3">
<div id="gif"></div>
</div>
<div class="col-sm-9">
<div id="submit"></div>
</div>
</div>
</div>
</body>
Also, I haven't change your code..just pasted your code on the correct block :)
you are missing selector while getting input val
function ready() {
var family = ["demo1", "demo2", "demo3", "demo4", "demo5", "demo6"];
function btns() {
var btn = $("<button>" + family[i] + "</button>")
$(btn).attr("data-search", family[i])
$(btn).appendTo("#buttons")
}
var submit = $("<button>Submit</button>");
var text = $("<input type='text' name='text'>");
$(text).appendTo("#submit");
$(submit).appendTo("#submit");
for (i = 0; i < family.length; i++) {
btns();
}
$(submit).on("click", function() {
var textBtn = $( "input[name='text']" ).val();
family.push(textBtn);
btns();
})
}
ready();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div id="buttons"></div>
</div>
<div class="row">
<div class="col-sm-3">
<div id="gif"></div>
</div>
<div class="col-sm-9">
<div id="submit"></div>
</div>
</div>
</div>
</body>
You're referring i in your btns function. The recommended way is to create a scope for any variable. I prefer to use let and const to scope the variables.
You have to move the iteration into the btns function and create another function which is solely responsible to create a button with the text passed as a parameter. And call the create button function from your btns function. And easily you can reuse the create button function even for your click event handler.
The sample code can be found here: https://codesandbox.io/s/pop7vkzpx
I am using form to pass the data from one page to other page.If i click the apply button will go to other page, i want to display the corresponding title of the career(i.e Java Developer) in the next page.I tried to achieve this with the help of javascript.
career.html:
<form action="job portal.html" method="get" target="_blank">
<div class="section-header text-center wow zoomIn">
<h2>Current Oppournities</h2>
</div><br /><br />
<div class="row">
<div class="col-lg-6">
<div class="box wow fadeInLeft">
<h4 class="title" id="career-title" name="career-title"><i class="fa fa-java"></i> <b>Java Developer</b></h4>
<hr />
<div class="carrer-opt">
<h5 name="test">Software Developer</h5>
<p>
Should have join immediate joiner .
</p>
</div>
<div class="col-lg-3 cta-btn-container">
<input type="submit" id="apply" value="Apply Now" onClick="testJS()" />
</div>
</div>
</div>
</form>
js:
<script src="js/main.js"></script>
<script>
function testJS() {
var b = document.getElementById('career-title').value,
url = 'job portal.html?career-title=' + encodeURIComponent(b);
document.location.href = url;
}
</script>
job portal.html:
<h1 id="here" style="color:black"></h1>
js:
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('here').innerHTML = data.career-title;
}
</script>
How to acheive this.Anyone please help.
You need to use HTML5 local storage for these kind of problems.
here is solution for your problem.
<script>
function testJS() {
var b = document.getElementById('career-title').value;
var titleText = localStorage.setItem('title', b);
var url = 'job portal.html';
document.location.href = url;
}
</script>
after setting title value get value by referencing id 'title' in your prtal.html script and set value for the element.
<script>
window.onload = function () {
var valueText = localStorage.getItem('title');
document.getElementById('here').innerHTML = valueText;
}
</script>
I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}
If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.