I need to save a div with localstorage. When i press a button the div becomes visible but when i close the browser and open it again the div needs to be visible.
This is my code so far:
<script>
function openDiv() {
var film = document.getElementById("bookingDiv");
if(film.style.display == "none"){
film.style.display = "block";
}
}
function save() {
openDiv()
var saveDiv = document.getElementById("bookingDiv")
if(saveDiv.style.display == "block"){
localstorage.setItem("text", saveDiv)
}
}
function load() {
var loadDiv = localstorage.getItem("text")
if(loadDiv){
document.getElementById("bookingDiv") = loadDiv
}
}
</script>
<body onload="load()">
<input type="button" id="testButton" value="Save" onclick="save()" />
<div style="display:none" id="bookingDiv" type="text">
hello
</div>
</body>
You can only store strings using the localStorage. So you have to store the state of this element instead of the element itself.
function save() {
openDiv();
var saveDiv = document.getElementById("bookingDiv");
if (saveDiv.style.display == "block") {
localStorage.setItem("isTextVisible", true);
}
}
function load() {
var isTextVisible = localStorage.getItem("isTextVisible");
if (isTextVisible == "true") {
openDiv();
}
}
note: do not forget the semicolon after each statement as it might lead to wrong behavior!
Related
This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>
There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>
You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>
I have this code but it doesn't work:
HTML:
<button id="btn_search">Search</button>
<input id="srh" type="search">
JS:
var btnSearch = document.getElementById("btn_search");
var search = document.getElementById("srh");
if (document.addEventListener) {
btnSeach.addEventListener('click',activeSearch);
} else if (document.attackEvent) {
btnSearch.attackEvent('onclick',activeSearch);
}
function activeSearch (event) {
event.preventDefault();
if (search.style.width == '0') {
search.style.width = '14.8em';
search.style.opacity = '1';
} else if (search.style.width == '14.8em') {
search.style.width = '0';
search.style.opacity = '0';
}
I need a toggle button
What should I do?
I might think about using a CSS class and toggle() to show/hide you element.
var btnSearch = document.getElementById("btn_search");
btnSearch.addEventListener('click', function(event){
var search = document.getElementById("srh");
search.classList.toggle("hidden");
event.preventDefault();
});
#srh { width: 14.8em; }
#srh.hidden { display: none; }
<button id="btn_search">Search</button>
<input id="srh" type="search" />
You can simply use JQuery to simplify all the proccess. Make all the code as simple as:
function magictoggle(a) {
if (a == 1) {
$("#btn1").attr("onclick", "magictoggle(0)");
$("#searchbox").hide(1000);
//1000 Are the miliseconds will take the box to hide
} else {
$("#btn1").attr("onclick", "magictoggle(1)");
$("#searchbox").show(1000);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="magictoggle(1)">Search</button>
<input type="text" id="searchbox" placeholder="A search Box">
what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".
<html>
<body>
<p id="demo"></p>
<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >
<script>
function myFunction() {
var box = document.getElementById("chkbox");
if(checkbox.checked)
{
var checked.value = "yes";
var txt = checked.value;
document.getElementById("demo").innerHTML = txt;
}
else if(checkbox.unchecked)
{
var unchecked.value = "no";
var txt = unchecked.value;
document.getElementById("demo").innerHTML = txt;
}
}
</script>
</body>
function myFunction() {
var box = document.getElementById("chkbox");
if(box.checked)
{
document.getElementById("demo").innerHTML = 'yes'
}
else
{
document.getElementById("demo").innerHTML = 'no';
}
}
The problems in your code were:
You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.
There are multiple problems.
There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid
Try
<input type="button" value="button" onClick="myFunction()">
then
function myFunction() {
var box = document.getElementById("chkbox");
box.value = box.checked ? "yes" : 'no';
document.getElementById("demo").innerHTML = box.value;
}
Demo: Fiddle
Since jQuery tag is used include jQuery library in the page then
<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and
//dom ready handler
jQuery(function ($) {
//cache the elements for future use
var $chk = $('#chkbox'), // id-selector
$demo = $('#demo');
//click event handler
$('#button').click(function () {
//use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
$demo.text($chk.is(':checked') ? 'yes' : 'no')
})
})
Demo: Fiddle
try:
You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.
Here is code:
function myFunction() {
var box = document.getElementById("chkbox");
if (box.checked) {
document.getElementById("demo").innerHTML = "yes";
} else {
document.getElementById("demo").innerHTML = "no";
}
}
Here is working Demo
Check this one
function myFunction() {
if(document.getElementById('chkbox').checked) {
alert("checked");
} else {
alert("not checked")
}
}
try something like this,Shorthand
function myFunction(){
var box = document.getElementById("chkbox").checked;
document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}
I have the following Javascript code:
function toggleSearch() {
if(document.getElementById("searchitem").style.display == "block" ) {
document.getElementById("searchitem").style.display = "none";
document.getElementById("topsearchform").style.display = "block";
}
else {
document.getElementById("searchitem").style.display = "block";
}
}
function backtonormal() {
if(document.getElementById("searchitem").style.display == "none" ) {
document.getElementById("searchitem").style.display = "block";
document.getElementById("topsearchform").style.display = "none";
}
else {
document.getElementById("searchitem").style.display = "none";
}
}
And the following HTML Code:
<li id="searchitem">
<span>Search<span class="cursor"></span></span></li>
<li>
<div id="topsearchform">
<form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">
<input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/>
<input type="button" name="button" class="button">
</a>
</form>
</div>
</li>
The code is for a custom wordpress menu item which I created as follows:
function wpa_58902($items, $args){
if( 'main-menu' === $args -> theme_location ) {
$search = '<li id="searchitem"><span>Search<span class="cursor"></span></span></li>';
$search .= '<li><div id="topsearchform"><form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">';
$search .= '<input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/><input type="button" name="button" class="button"></a></form></div></li>';
}
return $items . $search;
}
add_filter('wp_nav_menu_items','wpa_58902',10,2);
The Javascript function should be executed when the searchitem link is clicked ( 1 time).
Problem: I have to click 2 times so the function will be executed.
2nd Problem:
What code do I have to add to the Javascript function for the form input to be automatically focused? Right now the auto focus is only working if I reload the page.
Thank you very much!!
EDIT:
PROBLEMS SOLVED
#Zlatan O. - thank you very much! I found a solution on my own :-)
The Problem was that on the first click display:block was not set.
After the first click display:block has been set and so on the second click it worked.
Here is the working code without using jquery:
function toggleSearch() {
document.getElementById("searchitem").style.display = "block";
if(document.getElementById("searchitem").style.display == "block" ) {
document.getElementById("searchitem").style.display = "none";
document.getElementById("topsearchform").style.display = "block";
document.getElementById('search_text2').focus();
}
else {
document.getElementById("searchitem").style.display = "block";
}
}
function backtonormal() {
if(document.getElementById("searchitem").style.display == "none" ) {
document.getElementById("searchitem").style.display = "block";
document.getElementById("topsearchform").style.display = "none";
document.getElementById('search_text2').focus();
}
else {
document.getElementById("searchitem").style.display = "none";
}
}
maybe it is not the best solution - I don't know - but it works :-)
Again thank you very much!!
In jQuery you can do it like this:
$(document).ready(function() {
$('li#searchitem a').click(function() {
$('#searchitem, #topsearchform').toggle();
$('input[name="search_text"]').focus();
});
$('input[name="search_text"]').blur(function() {
$('#searchitem, #topsearchform').toggle();
});
});
Done!
I am trying to remove the style or the background of a textbox to reveal the content after 10 clicks. How can I do that on Javascript?
here is my html:
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000">
and here is my JS:
function check() {
var tries++;
if (tries == 10){
document.getElementById('firstN').disabled= true;
}
}
The problem is that tries is a local variable (local to the check function). Every time check is called, a new variable named tries is created and initialized to 0.
Try this instead:
var tries = 0;
function check() {
tries++;
if (tries == 10) {
document.getElementById('firstN').style.background = '#ffffff';
}
}
(I'm assuming that you already have some code to call check when the element is clicked. If not, you need to add a click handler to your element.)
You are instantiating a var "tries" everytime you go into this function. Move the variable up a level to where it will increment:
var btn = document.getElementById("btnclick");
btn.onclick = check;
var tries = 0;
function check() {
tries++;
if (tries == 10){
var ele = document.getElementById("firstN");
ele.value= "DISABLED";
ele.disabled = true;
}
}
EDIT:
Working JSFiddle
store it in a cookie:
<script type="text/javascript">var clicks = 0;</script>
<input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" value="Click" onclick="clicks++">
onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
Here you go. Remove the alert lines when you see that it works.
<html>
<head>
<title>Test</title>
<script>
function check(){
var getClicks = parseInt(document.getElementById('firstN').getAttribute('clicks')); //Get Old value
document.getElementById('firstN').setAttribute("clicks", 1 + getClicks); //Add 1
if (getClicks === 10){ //Check
alert('Locked');
document.getElementById('firstN').disabled= true;
} else {
alert(getClicks); //Remove else statement when you see it works.
}
}
</script>
</head>
<body>
<form action="#">
Input Box: <input id="firstN" type="text" style="color:#FF0000; background-color:#FF0000" onclick="check();" clicks="0">
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>