jQuery script not working in HTML page [duplicate] - javascript

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 trying to use a jQuery script, yet it is not displaying as it should. I have it working within JSFiddle. Yet it does not work within my page: when an option is chosen it does not show anything at all. What am I doing wrong?
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="css/faqtest.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
$('select').on('change',function() {
var answer = $(this).val();
$('.answers').hide();
$('#'+answer).show();
})
</script>
<select>
<option disabled selected>choose</option>
<option value="answer1">answer1</option>
<option value="answer2">answer2</option>
<option value="answer3">answer3</option>
</select>
<div class="answers" id="answer1">answer1</div>
<div class="answers" id="answer2">answer2</div>
<div class="answers" id="answer3">answer3</div>
</body>
</html>

Execute the code on document ready.
$(function(){
$('select').on('change',function() {
var answer = $(this).val();
$('.answers').hide();
$('#'+answer).show();
});
});

Related

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

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.

why javascript cant find element? [duplicate]

This question already has answers here:
My Javascript doesn't work when I put a script element in the head to load it from a URL [duplicate]
(3 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 3 years ago.
I don't know why buy javascript say my div is null.
this the javascript code:
var box = document.getElementById("box");
box.style.height= box.innerText;
and this is the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="classStyle.css">
</head>
</head>
<body onmousemove="search()">
<script src="java.js"></script>
<center>
<div id="header">Fantasy class</div>
<div id="box">50%</div>
<div type=buttom> יצירת ליגה</div>
</center>
</body>
</html>
Your script tag appears before the div id="box". Therefore, it is run before that div is created, and returns null.
To fix this, try moving the script tag under the div.

JavaScript onchange function is undefined? [duplicate]

This question already has answers here:
What does a script-Tag with src AND content mean?
(4 answers)
Closed 5 years ago.
I have no idea why this function keeps saying it is undefined. I'm trying to call it onchange on a tag and i'm trying to check if the value being called into the function is the value of the selected option. This is an extremely simple html page so I have no idea why this error would pop up? Can anybody tell me what's wrong with this code?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Dog Decider</title>
<script src="data.js">
function buildSelect(dom){
console.log(dom);
}
</script>
</head>
<body>
<h1>Welcome to Dog Decider!</h1>
<p>Are you looking for a small or large dog?</p>
<select name="first" onchange="buildSelect(this);">
<option value="none">-- Select Dog Size --</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</body>
</html>
Originally the function was bigger and actually implemented data.js, but I tore it all down to try and discover the root of this problem...
Just remove the src="data.js" from your script tag and it should work. HTML will only evaluate the contents of script tags with the attribute type set to text/javascript or none and no src attribute.
Edit: To load data.js in your page add another empty script with src="data.js" before the script in your page.
<script src="data.js"></script>
<script type="text/javascript">
function buildSelect() {
// ...
}
</script>

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

jQuery Searchable DropDown Plugin doesn't work

I can't get it to do anything. The drop down just behaves normally. I've followed their instructions and created the simplest demo I could and still nothing works. I've checked my paths and put everything in the same directory to make sure everything is being found. I have jQuery being loaded first.
Here's the html file:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.searchabledropdown-1.0.8.src.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
Here's a link to the plugin. Demo is on the plugin page: http://jsearchdropdown.sourceforge.net/
this works for me:
<!doctype html>
<html>
<head>
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select").searchable();
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
It seems like the $.browser has been removed from jquery 1.9 core and above see the reference here you can decide to fix the problem by changing the library, use an older jquery version or use another alternative here you can find some better examples.
Good luck!
I downloaded the code and tested it. The problem is jQuery 1.9.1, when I put that version it does not work, but when I put back jQuery 1.8.3 it works.
I don't think there is a way to solve it unless you dig in the library, so it's better to use 1.8.3 as in the demo.
For the above Example: Once you searched the key like 'Zoo..' then you can select 'Zoomba'. Again If want to change the selection, in that list you can able to see only 'Zoomba' not all values.
If you want to show all values in that list you have to clear that searched key once selected index changed. Like this,
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Searchable</title>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://jsearchdropdown.sourceforge.net//jquery.searchabledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').searchable();
$('#myselect').change(function() {
$(this).autocomplete('search', '');
});
});
</script>
</head>
<body>
<select id="myselect">
<option value="0">Aardvark</option>
<option value="1">Beta</option>
<option value="2">Charlie</option>
<option value="3">Louis Chan</option>
<option value="4">Zoomba</option>
<option value="5">Lima</option>
</select>
</body>
</html>
You written code is fine, It is a browser and Jquery version related issue.
Runs on IE 7.x, IE 8.x, Firefox 3.5.x, Safari 4.x, Opera 10.x, Chrome 3.x
It uses version Jquery 1.7.2 and Jquery UI 1.8.18
Also use plugin http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/forms-controls/searchabledropdown/jquery.searchabledropdown.js
You can check the running version on JSFiddle
http://jsfiddle.net/JWyRZ/
You always can use jquery-browser-plugin plugin from https://github.com/gabceb/jquery-browser-plugin. It adds the functionality missed by upgrade to 1.9. Just make sure you load jquery first and jquery-browser plugin afterwards.

Categories