Hiding elements in HTML via JQuery, but not working [duplicate] - javascript

This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Html script tag - can script be added when src is used [duplicate]
(4 answers)
Closed 11 months ago.
Trying to currently write a function that hides an HTML table element whenever an option is chosen on a dropdown menu. However, trying to test this doesn't seem to yield results.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
$(function () {
$(".testClass").hide();
});
</script>
And the HTML:
<div class="testClass">Test</div>

Close original the script tag used for using src, and open another one for the inline script.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(function () {
$(".testClass").hide();
});
</script>
</head>
<body>
<h2>Some heading</h2>
<div class="testClass">Test</div>
</body>

You are not supposed to put anything between the jquery tags.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
Then create another script inside the body of your application. Here is an example from w3schools:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
The example above shows how to hide an element using jQuery with a click of a button.
However, I am not sure it is the best way to hide an element in Angular. You can do it with an example from here:
Angular 2 Show and Hide an element
Please look at gentiane answer.

Related

Basic code not working with jQuery [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I am very new to jQuery, literally just trying to get it to work for the first time. Only the alert box works, but none of the other very simple methods I am trying out. Here are the files:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="myJavaScript.js"></script>
</head>
<body>
<h1 id="title">This is a title</h1>
<p> This is some sample text.</p>
</body>
</html>
JavaScript file:
$(document).ready(function (){alert("this works!")});
$("#title").text("but this is not not working");
As you can see the example can't be simpler. I have off course downloaded the jquery-3.1.0.min.js file and put it in the same folder as the html. If I comment out the link, the alert stops working, so I now the file is being referenced OK. Why is the second line of jQuery not working? Many thanks, P
Because the DOM(the entire structure of your application) isn't loaded yet. You need to use a $(document).ready(makes sure the DOM is loaded before running jQuery code) or an event handler to make the change visible.

reloading a div with javascript without reloading the whole page

hi i want to reload a div when i click on a button, am looking for simplest code using JavaScript, i tried several codes but none of them worked,this is my last script and it didn't work either
this is my code
You can use the html() method in jquery to get the content as well as modify the content of a div.
Find the working example here:
https://jsfiddle.net/dke1Lw5n/
Find the code below:
<html>
<head>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function () {
$('#publish').html($('#publish').html() + 1);
});
});
</script>
<body>
<div id="publish">5</div>
<button type="button" id="btn_click">clickme</button>
</body>
</html>

When using document.getElementById, it's not working properly [duplicate]

This question already has answers here:
JavaScript getElementByID() not working [duplicate]
(3 answers)
Closed 7 years ago.
The Problem
I'm trying to display the output of a function to a div, but i can't figure out why it isn't displaying. How can i fix this so that it displays properly?
What i've tried so far
I've copied a document.getElementById statement from another codeblock i wrote that is functioning , and checked it for any typos etc. All seems well there.
I googled innerHTML to be sure that I was using it correctly.
Also changed the document.etc line to document.write to ensure the function was working properly, it output properly.
My Code
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
The problem is that you're trying to use the div#output before it's even loaded by the browser.
There are two simple solutions for this:
First
Put the <script> tag after the div#output, so it will be already loaded.
<html>
<head>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
parameters("coding" , "coffee");
</script>
</body>
</html>
Second
Put your Javascript code inside the DOMContentLoaded event, so it will only be called after all the DOMElements are loaded in your page.
<html>
<head>
<script type="text/javascript">
function parameters(one, two) {
document.getElementById('output').innerHTML=(one + two);
}
document.addEventListener('DOMContentLoaded', function() {
parameters("coding" , "coffee");
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>

document.getElementById is not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
document.getElementById() doesn't work? [duplicate]
(7 answers)
Closed 7 years ago.
im new to javascript and want to fill a div with some text. but it doesn't work.
in the documentation this is the common way to do this. but, why doesn't work this for me?
my code is
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</head>
<body>
<div id="mytest"></div>
</body>
</html>
You need to move your script to the end of your HTML. Right now, you're executing the script BEFORE your HTML has been parsed so the document is empty and thus document.getElemntById('mytest') does not find anything.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</body>
</html>
See this other answer for a lot more discussion of this issue and other options if you don't want to move your <script> tag:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
thats because, in your document, the javascript is load at the first, but the div with the id mytest is not loaded at this moment.
you have 2 options to get this working:
first: say javascript to wait until the dom is loaded completly
window.onload=function(){
document.getElementById('mytest').innerHTML="hey";
}
second:
put your script code at the bottom, so the javascript is loaded at least.
but i would prefer the first solution.
best
Try in this way
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="mytest"></div>
</body>
<script type="text/javascript">
document.getElementById('mytest').innerHTML="hey";
</script>
</html>
Js fiddle

Cannot set property "onchange" of null [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
I'm trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?
<html>
<head>
<title>blah</title>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</head>
<body>
<div id="abc">
</div>
</body>
You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.
Your script runs before the DOM has been loaded. To fix this you can place your code in the window.onload function like so:
window.onload = function() {
alert(document.getElementById("abc"));
};
An alternative is to place your script right before the closing </body> tag.
If you don't want to attach to the load event then simply put your script at the bottom of the body, so it will execute at the end-
<html>
<head>
<title>blah</title>
</head>
<body>
<div id="abc">
</div>
<script type="text/javascript">
alert(document.getElementById("abc"));
</script>
</body>
</html>
This is because the script runs before the page has rendered.
For proof add this attribute to the body tag:
<body onload="alert(document.getElementById('abc'));" >
But it doesn't exist, not at that point in the HTML. HTML documents are parsed top-to-bottom, just like programs run. The best solution is just to put your script tag at the bottom of the page. You could also attach your JavaScript to the onload event.

Categories