I am creating a search input which displays a list of results as the user inputs text. The results are called from a JSON database, which then takes certain info and places it as text within an anchor element. I am trying to display only six of these results at a time, and was wondering if there was a way to put a cap on the amount of a certain element which can be displayed and doesn't over-rule the i variable I already have set? Thank you
My Code:
for (let i=0; i < results.length; i++) {
var div = document.getElementById('dropdown');
var link = document.createElement('a');
var locDot = document.createElement('img');
var linkT = document.createElement('h1');
var linkV = document.createElement('p');
link.setAttribute('href', 'NTS_TAXI_PLACEMENT.html');
link.setAttribute('class', 'link');
link.setAttribute('id', `link${i}`);
locDot.setAttribute('src', 'locationDot.png');
locDot.setAttribute('class', 'locationDot');
linkT.setAttribute('class', 'address');
linkV.setAttribute('class', 'city');
linkT.textContent = (`${results[i].title}`);
linkV.textContent = (`${results[i].vicinity}`);
div.appendChild(link);
link.appendChild(locDot);
link.appendChild(linkT);
link.appendChild(linkV);
var linkAmount = div.getElementsByTagName('a');
var linkDisplay = linkAmount[i].style.display;
document.getElementById('test').innerHTML = linkDisplay;
function filterFunction() {
var i, input, inputStr, div, a;
input = document.getElementById('searchInput');
inputStr = input.value.toUpperCase();
div = document.getElementById('dropdown');
a = document.getElementsByTagName('a');
for (i=0; i < results.length; i++) {
txtValue = a[i].textContent;
if (txtValue.toUpperCase().indexOf(inputStr) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
}
Related
I have a simple table with cells. When the user clicks on a cell, a textbox is added inside the cell where they can edit the content. However, when i double click a cell to edit it's content, the attributes of the input field show up. It does not allow me to edit and add another value. Here is the script I'm using.
window.onload = function() {
var cells = document.getElementsByTagName("td");
var theads = document.getElementsByTagName("th");
for (let i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function() {
highlightCell(i);
});
}
function highlightCell(x) {
var txtBox = document.createElement("input");
txtBox.id = "myTxt";
txtBox.type = "text";
for (var i = 0; i<9; i++) {
if (i == x) {
txtBox.value = cells[i].innerHTML;
cells[i].innerHTML = "";
cells[i].appendChild(txtBox);
cells[i].style.backgroundColor = "lightBlue";
}
}
}
}
Found the solution, just needed to use select(). This highlights the selected field, adds a input box which the user can update, then save the value in the cell when enter is pressed.
function highlightCell(x) {
//add input field inside cell
var txtBox = document.createElement("input");
txtBox.id = x;
txtBox.type = "text";
for (var i = 0; i<9; i++) {
if (i == x) {
txtBox.value = cells[i].innerHTML;
cells[i].innerHTML = "";
cells[i].appendChild(txtBox);
txtBox.select();
cells[i].style.backgroundColor = "lightBlue";
cells[x].onkeypress = function(){
var event = window.event;
var btnPress = event.keyCode;
if(btnPress == 13)
{
var elem = document.getElementById(x);
cells[x].innerHTML = elem.value;
elem.parentNode.removeChild(elem);
}
}
} else {
cells[i].style.backgroundColor = "white";
}
}
}
For some reason my bootstrap panels won't show the body text. I have set up all my elements via DOM Manipulation.
My panel header text displays properly, however my body text doesn't show up.
I also noticed that the bootstrap panel body content does not have any elements, just lines of text.
I have tried to add text elements to it but so far nothing has been working. Here is my code:
JS
var searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', function() {
var term = document.getElementById('term').value;
var matched = [];
for (var i = 0; i < hotelRooms.length; i++) {
if (hotelRooms[i].hotel.indexOf(term) !== -1) {
matched.push(hotelRooms[i]);
}
}
for (var i = 0; i < matched.length; i++) {
var roomResults = document.createElement('div');
roomResults.setAttribute('id', 'results');
roomResults.setAttribute('class', 'result-style');
var resultsArea = document.getElementById('results-area');
console.log(matched[i]);
var panelDefault = document.createElement('div');
panelDefault.setAttribute('class', 'panel-default');
var panelHeading = document.createElement('div');
panelHeading.setAttribute('class', 'panel-heading');
var panelBody = document.createElement('div');
panelBody.setAttribute('class', 'panel-body');
var name = document.createElement('h3'); // Hotel Name
name.setAttribute('class', 'hotel-name');
name.textContent = matched[i].hotel;
var price = document.createElement('div'); // Room Price
price.setAttribute('class', 'room-price');
price.textContent = matched[i].price;
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
resultsArea.appendChild(roomResults);
}
});
You are never appending panelBody to panelDefault.
....
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
panelDefault.appendChild(panelBody);
....
You have just created a div, you need to append it to the body tag document.body.appendChild(size)
var size = document.createElement('div');
size.setAttribute('class', 'room-size');
size.textContent ="hello"
document.body.appendChild(size)
For example if this is a line of text which is placed inside a file : The sun rises in the East.
Also, in an HTML page it reads a text from a text box (say 'rises'). I need to check this text with the text inside the file to find a match. And I need to return the text value inside the file. How it can be performed? I am using JavaScript.
function Upload() {
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for(var i = 0; i < rows.length; i++)
{
var row = table.insertRow(-1);
var cells = rows[i].split(",");
for(var j = 0; j < cells.length; j++)
{
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
var radio = document.createElement('input');
radio.type = 'checkbox';
radio.name = 'check';
}
}
var button = document.createElement('button');
button.textContent = 'Send';
cell.appendChild(button);
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
Read the text from the file i.e The sun rises in the East.
Now,compare this value to the value entered in the textbox by the user using string.search(textbox value), where string="text read from the file".
I am trying to go through a select list with 200+ entries and click on each one. When an element is clicked on it executes a function selectCountry() which adds a line to a table. I want to have it create a table with every option selected. The page of interest is at: http://www.world-statistics.org/result.php?code=ST.INT.ARVL?name=International%20tourism,%20number%20of%20arrivals.
So far I have the following, but it doesn't seem to work:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {selectCountry(opt.value)}
I am trying to do this in the console in Chrome.
One of the most useful features of dev tools is that when you write the name of a function, you get back its source code. Here's the source code for the selectCountry function:
function selectCountry(select) {
if (select.value == "000") return;
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName('ul')[0];
var choices = ul.getElementsByTagName('input');
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value) {
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('[]');
return;
}
var li = document.createElement('li');
var input = document.createElement('input');
var text = document.createTextNode(option.firstChild.data);
input.type = 'hidden';
input.name = 'countries[]';
input.value = option.value;
li.appendChild(input);
li.appendChild(text);
li.onclick = delCountry;
ul.appendChild(li);
addCountry(option.firstChild.data, option.value);
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('');
}
Your flaw is now obvious. selectCountry accepts the entire select element as an argument as opposed to the select's value (which is a terrible design but meh). Instead of passing the value of the element, change its index:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var i = 0; i < opts.length; i++) {
sel.selectedIndex = i
selectCountry(sel)
}
I have these check boxes that are created with a javascript function:
I would like the text to appear to the right of the checkbox and all of the text to be on one line.
Here is the javascript function and the html:
function receiveAnswer(response) {
// var aSeats = document.getElementById("aSeats");
// aSeats.options.length = 0;// clear it out
//
// for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
// var option = aSeats.appendChild(document.createElement("option"));
// option.value = i;
// option.appendChild(document.createTextNode(response.aSeats[i]));
// }
var aSeats = document.getElementById("aSeats");
while (aSeats.childNodes.length > 0) { // clear it out
aSeats.removeChild(aSeats.childNodes[0]);
}
for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
var input = aSeats.appendChild(document.createElement("input"));
input.value = i;
input.type = "checkbox";
var br = aSeats.appendChild(document.createElement("br"));
input.appendChild(document.createTextNode(response.aSeats[i]));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
}
}
html code:
<div name="aSeats" id="aSeats">
<input type="checkbox">
</div>
Why not use jQuery.
Check working example http://jsfiddle.net/FxgYz/
Create a separate div to put the text in and position that div to the side of the input box, something like:
var div = document.createElement("div");
div.style.width = 100;
div.innerHTML = text;
etc.