I am trying to make a div disappear with javascript. It just doesn't work. What am I doing wrong?
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
document.getElementById("des").style.visibility = "hidden";
</script>
<div id="des">
Text.
link
</div>
You are running the script before the DOM has loaded.
If you put the script after the div, it works
Try and throw a document ready around your code.
And if you are loading jquery you can just do $('#des').css('visibility', 'hidden'); or $('#des').hide()
<script type="text/javascript">
$(document).ready(function(){
$('#des').css('visibility', 'hidden');
});
</script>
You are trying to get the element with id = "des", before it's created.
<div id="des">
Text.
link
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
document.getElementById("des").style.visibility = "hidden";
</script>
This should work.
this worked for me when I placed the javascript code in a function and load it when the body loads e.g
<script>
function func(){
document.getElementById("der").style.visibility = "hidden";
}
</script>
<body onload=func()>
<div id="der">
test
</div>
</body>
You should wrap the script in a $(document).ready block because you are calling the script before the DOM is loaded.
So,You will have to do it like this
<script type="text/javascript">
$(document).ready(function() {
document.getElementById("des").style.visibility = "hidden";
});
</script>
It's:
document.getElementById("des").style.display = "none";
you can also use:
document.getElementById("des").style.display = "block";
to make it visible again.
That's my preferred method, at any rate.
You need to wait for the document to be ready. Try using:
$( document ).ready(function() {
document.getElementById("des").style.visibility = "hidden";
});
or you could use JQuery:
$(documet).ready(function() {
$( ".des" ).hide();
});
Why not to use JQuery hide() method, as you already using JQuery and obiviously code to be included either in $(document).ready(function(){\\some code}) or $(window).load(function(){\\some code});
$('#des').hide()
in JS, you can achieve by
document.getElementById("des").style.display = "none";
Javascript is an interepreter based language, in case you want to write script first and use later, add a function instead.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function hideMyDiv(){
document.getElementById("des").style.visibility = "hidden";
}
</script>
<div id="des">
Text.
link
</div>
<script type="text/javascript">
hideMyDiv();
</script>
Cheers !!
Related
I want to display the alert() after a new row is appended.
This is my code, but delegation is not working.
$(".tweet").each(function() {
alert("tweet alert");
});
$("button").click( function(){
$("#container").append("<div class='tweet'>tweet</div>");
});
$(document).delegate('click', function(){
$(this).addClass("tweet");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
Im using a basic jquery version 1.4
In my code, the alert doesnt display at all! what am doing wrong? thank you.
You can add the alert inside the click handler like so:
$("button").click(function() {
$("#container").append("<div class='tweet'>tweet</div>");
alert("tweet alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="container"></div>
<button>Create</button>
I have an extern form from API display in a modal. I want to close the modal when it's submitted.
My modal
<div id="modal">
<div class="modalconent">
<div class="pipedriveWebForms" data-pd-webforms="https://pipedrivewebforms.com/form/f5cd01e9418f0b683195eb0e821770181945719">
</div>
<button id="button">Close</button>
</div>
</div>
My script
<script type="text/javascript">
window.onload = function () {
document.getElementById(submitButtonLoading).onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
</script>
<script src="https://pipedrivewebforms.com/webforms.min.js"></script>
I can't modify the form from the API. When I inspect it in my web browser I see the submit button has the id submitButton. But, my function doesn't work with this id. I don't know how to make my modal work with the API script.
Well one thing I can see is your getElementById(submitButtonLoading) doesn't have doesn't have quotes around it.
<script type="text/javascript">
window.onload = function () {
document.getElementById('submitButtonLoading').onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
</script>
Hope this helps. Cheers!
As Leo said, you are missing quotes in
document.getElementById(submitButtonLoading).
But it calls for an element with id = "submitButtonLoading" and you don't have it as I see from your code that you ided as "button"
<button id="button">Close</button>
Change it to:
<button id="submitButtonLoading">Close</button>
Very simple code, for some reason nothing I try will work! I have obviously imported Jquery, jqueryUI, ajax, all the things I need imported (more than once!). But for some reason this button does not want to be clicked using Jquery! I got it to work with onClick, but I would like to be using jquery for this. SOS!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
function pie(){
//alert();
}
</script>
<body>
loading...
<input type="button" id="heyo" onclick="pie()" value="ff" />
</body>
Wrap you jquery code with $(document).ready(function() {}) to make sure all the DOM objects have been loaded before accessing them with jQuery:
$(document).ready(function() {
$("#heyo").click(function(){
alert();
});
$("input").click(function(e){
var id1 = e.target.id;
alert(id1);
});
$('input[type="button"]').click(function(){
alert();
});
});
I have a page that will be displayed on a phone. On the page I have a link
when clicked runs a javascript script. In the script I want to hide a
with the class name, content and display the with the class name, sidebar1. I put an alert in the script to show that the script runs when the
link is clicked. It will come out when I get the script running. Right now the
commands after the alert do not work. Can someone help? Here is my script:
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
document.className.content.style.display = 'none';
document.className.sidebar1.style.display = '!important';
};
</script>
If you want to update a style on a particular element, you should use the element id:
document.getElementById("myDIV").style.display = 'none';
Try using getElementsByClassName()
document.getElementsByClassName('content');
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
or with jQuery
$('.className').hide();
Change your code to this
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
var content = document.querySelector(".content"),
sidebar1 = document.querySelector(".sidebar1")
content.style.display = 'none';
sidebar1.style.display = 'block';
};
</script>
Try something like this,
document.getElementsByClassName("myClassName").style.display = "none";
document.getElementsByClassName("sidebar1").style.cssText = 'display:inline !important';
Why doesn't the following work for me?
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>
Because your script runs BEFORE the label exists on the page (in the DOM). Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/)
This won't work:
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>
This will work:
<label id="lbltipAddedComment">test</label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:
<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
});
</script>
Have you tried .innerText or .value instead of .innerHTML?
Because a label element is not loaded when a script is executed. Swap the label and script elements, and it will work:
<label id="lbltipAddedComment"></label>
<script>
document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
Use .textContent instead.
I was struggling with changing the value of a label as well, until I tried this.
If this doesn't solve try inspecting the object to see what properties you can set by logging it to the console with console.dir as shown on this question: How can I log an HTML element as a JavaScript object?
Here is another way to change the text of a label using jQuery:
<script>
$("#lbltipAddedComment").text("your tip has been submitted!");
</script>
Check the JsFiddle example
Using .innerText should work.
document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';
Try this:
<label id="lbltipAddedComment"></label>
<script type="text/javascript">
document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
Because the script will get executed first.. When the script will get executed, at that time controls are not getting loaded. So after loading controls you write a script.
It will work.