So, I am creating a website and I need to make a result box appear with a list of possible results after the user searches something in the search bar.
It's something like this: http://s24.postimg.org/4qqgz0t6d/Sem_T_tulo.png
The results box will only appear after the user clicks the "search" button.
I am only looking for the javascript code that makes that box appear. The search algorithm is another problem that I think I can handle.
Do you guys know something that can help me? At least something where I can start from...
Thanks.
This should get you down the right path:
<!DOCTYPE html>
<html>
<head>
<style>
#results-container
{
height:200px;
width:400px;
border:1px solid #A9A9A9;
}
</style>
</head>
<body>
<form action="#">
<input type="text" />
<button id="search-button" type="submit">Search</button>
</form>
<div id="results-container" style="display:none;">
Results go in here.
</div>
<script>
document.getElementById("search-button").addEventListener("click", function(e){
e.preventDefault();
document.getElementById("results-container").style.display = 'block';
});
</script>
</body>
</html>
You would obviously have to handle all of the search related events but this demonstrates how to show the results container after submitting. I also recommend using a javascript framework such as http://jquery.com/ especially if you'll be using AJAX for the dynamic generation of results.
Related
So far I only have the code that is able to make 2 boxes, made the 4 buttons, but only 1 button actually does something, and that is the start button where a there is a popup that asks for a name, and after you input that name, it will appear in the first box.
<html>
<head>
<script>
function myTask1() {
var sentence = prompt("Please enter a name");
var arrSentence = sentence.split(" ");
if (arrSentence != null) {
document.getElementById("answer1").innerHTML = arrSentence.sort(); //so we can use Array.sort() function
}
console.log(sentence);
return sentence;
}
function myFunction() {
var x = document.getElementById()
}
</script>
<style> </style>
</head>
<body>
<p><button type="button" onclick="myTask1()">Click me!</button></p>
<button type="button" onclick="ClearFields();">Clear</button>
<button type="button" onclick="myFunction()"> --> </button>
<button type="button" onclick="myTask4()"><-- </button>
<div clas="box" style="background-color:red; height:200px; margin:20px auto;">
<center>
<p id="answer1"></p>
<center>
</div>
<div class="box1" style="background-color:grey; height:200px; margin:20px auto;"> </div>
</body>
</html>
I've made some demo code for you. I assume that you're a beginner because the question is basic. This is not a problem though, starting something new is great. You can find the answer on the internet and the best programmers are often people who are good with Google. But I hope by showing you the solution anyway you get a feeling for structure. Try to understand every line. Try write it from scratch afterwards anyway. It's a great exercise.
Code: https://github.com/Bunpasi/stackoverflow-answers/blob/master/js-listbox-selector/index.html
Some things to notice:
- I've put the script in the footer so it doesn't interfere with the loading time of the page.
- I've put all code in an anonymous function to avoid global functions.
- I changed clas to class.
- I've used event listeners instead of even attributes.
- I didn't duplicate the logic for both boxes but used one function which I can use on both.
After your understand the code, there are some things you can improve on this code.
- Make sure the selection doesn't go away after the update. You can store this in the data as well. Right now the data is an array of ID's, but you can turn it into an array of objects containing even more important data, like whether it's selected.
- Move the style from the elements to the header.
Don't be discouraged by down votes.
Good luck!
Update
If you want to move all names all the time. This is what you need to do.
This line looks for all selected elements:
var selectedElements = boxes[fromId].querySelectorAll('.list_item.selected');
Remove the selected .selector:
var selectedElements = boxes[fromId].querySelectorAll('.list_item');
I'm a beginner at coding but I couldn't find the answer on the internet.
I have a browser game with a donate button from Paypal. After someone has done a donation, he goes to the thankyou-page.
I want to give the people who have donated a little golden crown (an svg) in the game, and I tried to do that with this when pressing the "go back to homepage and get a crown" button on the thankyou-page:
document.getElementById('crown').style.display = "inherit";
(the display according to the css was "none")
But the thing is: It doesn't work (it must be because I have 2 different .html files with 2 different .js files, because when I use one .js file for both of the .html files it gives many errors of things that are not working).
The main thing is: I want to give something visually back to the people who donated. Is there a simple solution to do this?
index.html where the crown is:
<svg id="crown">
Some svg coordinates that form a crown
</svg>
style.css where it is invisible:
#crown {
display: none;
}
A button in index.html has a Paypal link where you can donate. When you have donated, you land on thankyou.html with this button on it:
<button id="getCrown" type="button"
onclick="window.location.href='/index.html'; getCrown();">Give me that crown!</button>
That should let the Javascript in thankyou.js make the crown visible with this:
document.getElementById('crown').style.display = "inherit";
But it doesn't. It gives an error:
Uncaught TypeError: Cannot read property 'style' of null
at getCrown (thankyou.js:5)
at HTMLButtonElement.onclick (thankyou.html:32)
So you give your button a onclick="set_crown()" attribute.
This calls the set_crown() javascript function:
function set_crown(){
localStorage.setItem('crown', 'visible');
};
then you check in your index html if he got this key with the right value with javascript like this:
if (localStorage.getItem('crown') === 'visible'){
document.getElementById('crown').style.display = 'inherit';
};
Note that you can do the same with sessionStorage. The difference is that localStorage data will stay there untill the user clears his browser or you delete it with javascript while sessionStorage will clear itself when the session ends aka the browser closes.
Here again something to read ;) localStorage info
Here the two little example pages:
index.html :
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body onload="check_crown()">
<div id="crown" style="display:none">
<p>I am a Crown :)</p>
</div>
<button id="donate" type="button"
onclick="window.location.href='thankyou.html';">
Donate
</button>
<script type="text/javascript">
function check_crown(){
if (localStorage.getItem('crown') === 'visible'){
document.getElementById('crown').style.display = 'inherit';
};
};
</script>
</body>
</html>
thankyou.html :
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<button id="getCrown" type="button"
onclick="window.location.href='index.html'; set_crown();">
Give me that crown!
</button>
<script type="text/javascript">
function set_crown(){
localStorage.setItem('crown', 'visible');
};
</script>
</body>
</html>
Simply run the index with your favorite browser, Hope that helps :)
It appears you have two different document objects i.e. the thankyou.html & index.html. So as part of your event handling (in context of thankyou document) you're trying to alter the state of another document (index.html). This is not something you want to do.
I have tried to create a fiddle out of your example and it works fine with a single document model. https://jsfiddle.net/8y4jdapt/20/
See if it helps.
Otherwise, why don't you pass on a URL parameter to index.html like window.location.href='/index.html?showCrown=true And use this parameter somwhere in the context of index.html to decide whether to render the crown or not.
I have been working on a little project for a day or two. The code is the following.
<!DOCTYPE html>
<html>
<head>
<script>
function search()
{
document.getElementById("text1").value
window.location.hash = "myVariable";
}
</script>
</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>
<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>
</body>
</html>
Now you may be wondering what am I trying to accomplish with this code? Well, I want to be to enter a value in the text box and then it will jump me to the section (the section is the value in the text box). It is sort of like a search engine, but it is not.
For example the section is yeah. When a user enters yeah in the text box it is supposed to jump them to the yeah section. Instead nothing happens. And despite looking all over the Internet I have not found an answer that satisfies my needs, so I would kindly ask that you please explain to me what my problem is and possibly give me a solution to my problem.
I am using the Mozilla Firefox web browser (if that information is necessary).
Try this:
function search()
{
var elID= document.getElementById("text1").value;
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
The Element.scrollIntoView() method scrolls the element into view
Online Demo
Dalorzo's should work, but jQuery could be the better option than raw javascript if you plan to add more than just this function.
Here's a fiddle of what you're trying to do.
$("#button1").click(function() {
var t = $("#text1").val();
alert(t);
$('html, body').animate({
scrollTop: $("#"+t).offset().top
}, 2000);
});
I have a pretty standard html form with a few input boxes. I have a small div under each textbox that displays directions when the textbox has focus (the rest of the time they are hidden). The divs can also change color and display error messages.
I would like to be able to have one javascript function to show directions on focus, one function to show errors on blur, one function to hide directions/errors etc.
The problem that I am running into is how to best associate the textboxes and their respective divs. I have used a naming convention in which I gave the textboxes an ID like field1 and then called their div field1Div. This worked OK but something tells me there is a better way to do this.
What is the "correct" way to associate the div and textbox?
You may define custom attributes for input boxes.
<html>
<head>
<script>
function showHint(obj){
document.getElementById(obj.getAttribute("hintbox")).style.visibility = "visible";
}
function hideHint(obj){
document.getElementById(obj.getAttribute("hintbox")).style.visibility = "hidden";
}
</script>
</head>
<body>
<input hintbox="div1" onfocus="showHint(this)" onblur="hideHint(this)" />
<div id="div1" style="visibility:hidden">hint 1</div>
<input hintbox="div2" onfocus="showHint(this)" onblur="hideHint(this)" />
<div id="div2" style="visibility:hidden">hint 2</div>
</body>
</html>
http://jsfiddle.net/YhefV/
Labels might be the better way to go but if you want to use Divs - you can use something like this:
<html>
<head>
<script>
function giveDirections(obj){
obj.nextElementSibling.style.display="block"
}
function hideDirections(obj){
obj.nextElementSibling.style.display="none"
}
</script>
</head>
<body>
<input id="test" name="test" onfocus="giveDirections(this)" onblur="hideDirections(this)" />
<div style="display:none">Hi I am some directions</div>
</body>
</html>
http://jsfiddle.net/zq533/8/
using this.nextElementSibling - but I am not sure every browser supports - I tried it on FF,IE and Chrome and it worked.
I am sure there is a better way.
I need to display on a webpage a div when a user clicks on a button.
Does someone know how to do it ?
My code so far :
<body onload ="init()">
<input type="button" value="Display the div tree" onclick="check();" />
<script ="text/javascript">
function check() {
// I'd like to display on the page the div tree
}
</script>
<div id = "tree" style="display:none"> // I don't want to display it unless the user clicks on the button "Display the div tree"
</div>
</body>
thanks,
Bruno
document.getElementById('tree').style.display='';
Include this in your check function
i'm not sure if i understood the question, this seems a bit too easy:
function check() {
document.getElementById('tree').style.display=''; // or display='block';
}
EDIT :
the reason this dooesn't work for you is an error in your code. please change this line:
<script ="text/javascript">
to
<script type="text/javascript">
and everything wiill be fine. also, you should place the script in the head of your document, but thats not absolutely neccessary.