JavaScript onchange function is undefined? [duplicate] - javascript

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>

Related

jQuery script not working in HTML page [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 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();
});
});

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.

How to communicate from secornd page to first page usin javascript?

I have a requirement where i have to show the selected dropdown option from first page to second page of application.
I have tried to write FirstPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First page</title>
</head>
<body>
<div class="abc">
Dropdown: <select id="ddlViewBy" onchange="fun()">
<option value="1">select</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
</select>
<p>selected option is :<b id="abc"></b></p>
<button onclick="redirect()">Redirect</button>
</div>
<script>
function fun(){
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
document.getElementById("abc").innerHTML=strUser;
}
function redirect(){
var linkToSeconPage="http://localhost:63342/test/SecondPage.html";
window.location.href=linkToSeconPage;
}
</script>
</body>
</html>
and the SecondPage.html where i need to access strUser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>second page</title>
</head>
<body>
<div>here i want to access the selected dropdown value from first page</div>
</body>
</html>
Could you please throw some light on the approach to use strUser to SecondPage.html.
And also the window.location.href=linkToSeconPage; is not working in firefox.
I have also tried window.location=linkToSeconPage; , window.location.assign(linkToSeconPage); and using return false; after this after searching on google for answer but nothing worked in firefox but everything worked on IE 11.
Could you also suggest alternative for this using in firefox.
Thanks in advance.
location.assign(url) and location = url are equivalent and supported in FireFox. Try leaving off window.
Appending a value to the querystring as suggested by #Sam is not a bad option. Another option, which can be useful in more complex situations - or when you don't want to expose the selected value in the querystring (the value will be stored in logged files), is to use SessionStorage. In first page, add
sessionStorage.setItem('SELECTED', strUser);
And on page, you can retrieve with
sessionStorage.getItem('SELECTED');
SessionStorage stores the value in the browser for the lifetime of the user's current session. The token/key (SELECTED in my example, but can be any text) is scoped to the domain; thus other websites can't read the data that you place into SessionStorage.
Pass the value to the second page using a get parameter e.g.
window.location.href=linkToSeconPage + '?val=valueToPassThrough';
Then on the second page use:
var theValue = window.location.href.split('?')[1].split('=')[1];
However note that this will not take into account other get parameters passed to the page and in this respect it is fragile.
This is a very manual way of doing it and you would probably want to write a function which extracts this exact behaviour for you - and of course checks for problems with split - the above code assumes there is a ? in the URL and the argument required is the first one.

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

How to use external ".js" files

I have the following two javascript functions:
1
showCountry()
2
showUser()
I would like to put them in external ".js" files
1
countryCode
2
<form>
<select name="users" onChange="showUser(this.value)">
<option value="1">Tom</option>
<option value="2">Bob</option>
<option value="3">Joe</option>
</select>
</form>
What is the correct syntax to call these functions?
Code like this
<html>
<head>
<script type="text/javascript" src="path/to/script.js"></script>
<!--other script and also external css included over here-->
</head>
<body>
<form>
<select name="users" onChange="showUser(this.value)">
<option value="1">Tom</option>
<option value="2">Bob</option>
<option value="3">Joe</option>
</select>
</form>
</body>
</html>
I hope it will help you....
thanks
Note :- Do not use script tag in external JavaScript file.
<html>
<head>
</head>
<body>
<p id="cn"> Click on the button to change the light button</p>
<button type="button" onclick="changefont()">Click</button>
<script src="external.js"></script>
</body>
External Java Script file:-
function changefont()
{
var x = document.getElementById("cn");
x.style.fontSize = "25px";
x.style.color = "red";
}
In your head element add
<script type="text/javascript" src="myscript.js"></script>
This is the way to include an external javascript file to you HTML markup.
<script type="text/javascript" src="/js/external-javascript.js"></script>
Where external-javascript.js is the external file to be included. Make sure the path and the file name are correct while you including it.
countryCode
The above mentioned method is correct for anchor tags and will work perfectly. But for other elements you should specify the event explicitly.
Example:
<select name="users" onChange="showUser(this.value)">
Thanks,
XmindZ
You can simply add your JavaScript in body segment like this:
<body>
<script src="myScript.js"> </script>
</body>
myScript will be the file name for your JavaScript. Just write the code and enjoy!
I hope this helps someone here: I encountered an issue where I needed to use JavaScript to manipulate some dynamically generated elements. After including the code to my external .js file which I had referenced to between the <script> </script> tags at the head section and it was working perfectly, nothing worked again from the script.Tried using developer tool on FF and it returned null value for the variable holding the new element. I decided to move my script tag to the bottom of the html file just before the </body> tag and bingo every part of the script started to respond fine again.

Categories