html embedded with javascript
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
have I called this function correctly????
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
is there something wrong here???
function saysomething()
{
alert("I am 28 years old");
}
</script>
<body>
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Here is the full example.
This will work for sure.
Test it if you want.
Copy and paste the below code into W3Schools test environment, "Edit and Click me" to test.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
function saysomething()
{
alert("I am 29 years old");
}
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
</script>
<body onload="displayatts();">
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Your script runs before the document is parsed.
Therefore, getElementById returns null.
Move the <script> to the bottom.
"have I called this function correctly????"
You haven't called the displayatts() function at all. Add the following to the end of your script:
window.onload = displayatts;
That way displayatts() will be called automatically once the page finishes loading. It will, in turn, setup the click handler on your button.
Also, include the closing </head> tag just before the opening <body> tag.
Demo: http://jsfiddle.net/nnnnnn/rxDXa/
window.onload = displayatts;
Paste this code before </body> tag in your page.So you can be sure if element is null or not or the code is try to work before your html element is rendered.
Hope this helps your situation..
<script>
var element = document.getElementById("buttonone");
if(element){
element.setAttribute("onclick", "saysomething();");
}else
{
alert("element null, move the code to bottom or check element exists");
}
</script>
Related
I use mvc5. Do not include jQuery in test.
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
#RenderBody()
</body>
</html>
Test.cshtml:
<script type="javascript/text">
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
In result I have an error: ReferenceError: myFunction is not defined
and the result code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title></title>
</head>
<body>
<button onclick="myFunction();">Click me</button>
<script type='text/javascript' >
(function($){
function myFunction() {
alert("I am working");
};
})(jQuery);
</script>
</body>
</html>
I have read a lot about this error and have not founded the answer. Could you clarify, who wrap JavaScript code? Is there any flag to cancel it? Is there any other way to resolve the problem?
Something (probably MVC5) is wrapped your code for you, but with good reason. Putting onclick handlers on elements pointing at a globally declared function is how JS was written in the '90s.
To resolve it, put an id attribute on your button and remove the inline event handler:
<button id="mybutton">
and then use jQuery to register the event handler:
$('#mybutton').on('click', function () {
alert("I am working");
});
or, since you mentioned in later comments that you have a loop generating these elements, use a class and a data- attribute instead:
<button class="myclass" data-id="...">
with code:
$('.myclass').on('click', function() {
var id = $(this).data('id');
...
});
<script>
function myFunction() {
alert("its is working");
}
</script>
<button onclick="myFunction()">Click me</button>
This will work. cheers
I want to call an onload event before an focus event in a HTML page.
In my following code
<!DOCTYPE html>
<html>
<head>
<body onload='onloading()'>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).focus(function(){
callMe();
});
});
function callMe()
{
alert('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
document.write("some text");
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</head>
<p id="demo"></p>
</body>
</html>
When I execute this code then i get an a pop up as "Focus on current page " and in the back ground " some text" . But I expect to get an output in the following order
"some text"" in the back ground
"Onload function call" popup
"Focus is on current page" pop up .
But I am not getting the pop up "Onload function call" :( . I need to run the onload event in the body before the focus event. IS it possible to do such a thing ?
Try this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<p id="focus">Click here</p>
<script type="text/javascript">
function callMe()
{
$("#focus").html('Focus is on current page');
}
function onloading()
{
alert('Onload function call ');
}
function myFunction()
{
$("#demo").html("some text");
}
$(window).load(function () {
onloading();
});
$(document).ready(function(){
$("#demo").html= myFunction();
$(window).focus(function(){
callMe();
});
});
</script>
</body>
</html>
Your HTML is invalid. You have put the head tag inside the body which is not allowed.
Make use of the following structure:
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="date_time.js"></script>
</head>
<body>
<input id="input"><br>What is the number?</input>
<button type="button" onclick="getFunction()">Submit</button>
<script>
function getFunction () {
var x = document.getElementById('input').value;
if (x == 32) {
window.alert("Right answer!");
}
else {
window.alert("Try again.");
}
}
</script>
</body>
</html>
So I want to proceed or load a new HTML page when the user clicks on the "submit" button and the input is correct. Any ideas? Maybe JS DOM could help...
First you need to add a form tag, and give it a name, id, and action. The action should point to your desired page.
<form name="formname" id="formid" action="mypage.html">
Your javascript, where it is true, should simple use:
document.getElementById("formid").submit();
And it will direct to the action page only when true.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
leads to "ReferenceError: Can't find variable: blub"
What most likely obvious thing am I missing?
Try this :
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
Instead of using :
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
In your code you are calling a function(callback) without declaring it. this is not correct way to declaration a function.
JavaScript Functions
According your code you don't need to do any thing on document ready because your function trigger when anyone click on anchor Link. And the second thing is your code is not correct see this one $("#content").attr("data-x") Here you trying to get the data-x attribute of content div, but your div does not contains that attribute use this $("a").attr("data-x"):
Try the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub() //-- It's declarition of an function
{
var x = $("a").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
Working Example
try this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
The reason you're getting the error is because it can't find the value .attr("data-x"); on the tag <div id="content">. It simply doesn't exist there. If you're looking to append the data-x="12" as a value inside the <div> tag, you could do something like this:
<html>
<body>
<div id="content">
Link
<br/>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$('a[data-role="appender"]').click(function (e) {
e.preventDefault();
var x = $(this).data('x');
$('#content').append(x);
});
});
</script>
</html>
The code above attaches the code to the .click function in jQuery and is wired up using the $('a[data-role="appender"]') which makes your mark up a little bit cleaner. Hope this helps out ! The working solution can be found here: http://jsfiddle.net/TrV8z/
The function blub is local to your script because your passed it as an argument to the jQuery object by wrapping your code with $(...);. Your function is executed when the DOM finishes loading, but in a local scope, which you cannot access from an event attribute. The best way to solve your problem would be not to use an event attribute. Moreover, the div #element doesn't have a "data-x" attribute. Its child a element has one. Try this:
$(function() {
$("#targetlink").click(function(e) {
e.preventDefault();
var x = $("#targetlink").attr("data-x");
$("#targetlink").append(x);
})
});
I Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>