In one of my projects the onmousedown event didn't seem to be doing anything when it was meant to trigger a function in a separate JavaScript file.
I tried incorporating both onmousedown and onClick on a button in a small test file to see if it was just a problem in the project, and it didn't work either, leading me to believe that I must be doing something wrong...
Here is my test.html file:
<!DOCTYPE html>
<html>
<body>
<button onmousedown="click()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
And here is my main.js file:
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
To explain, the HTML button is supposed to trigger the click() function in main.js, and then cause "SUCCESS" to appear through the span element beside the button in the webpage; which it doesn't for me.
I have tried to do the same in a pen on codepen.io where it didn't seem to work either. Even weirder is the fact that I don't have any errors showing up at all... what am I missing?
It isn't working because you named your function 'click'. I changed the name to 'press' and your code works fine!
function press() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
<!DOCTYPE html>
<html>
<body>
<button onmousedown="press()">Click</button>
<span id="testSpan"></span>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Try it :
<!DOCTYPE html>
<html>
<body>
<button onmousedown="window.click()">Click</button>
<span id="testSpan"></span>
<script>
function click() {
document.getElementById("testSpan").innerHTML = "SUCCESS";
}
</script>
</body>
</html>
Related
I'm running into a problem with JQuery, I've read multiple threads about this but I cannot for the life of me figure out what is wrong with my code. I've gotten it down to a pretty simplistic version of what I was trying to do, but it still will not work. Here is the code that I'm trying:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#content').load("import.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
and here is the page that I'm trying to import:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="test-div">
<p>This is some text.</p>
</div>
</body>
</html>
can somebody please point out what I might be doing wrong here?
The DOM is likely not fully loaded when the .load function is being run. Change to this.
<script>
$(document).ready(function() {
$('#content').load("import.html");
});
</script>
Note - as in the comment, this only works on a server.
It should ideally work. There must be some other issue
Check if jquery library file is loading correctly
HTML page name is import.html or not.
At last, Are you getting any error on console?
This is my scala.html file code.
#()
<!DOCTYPE html>
<html>
<head>
<title> Spin To Win </title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/styles.css")">
<script type="text/javascript" src='#routes.Assets.versioned("scripts/test.js")'></script>
</head>
<body>
<h1> This is title </h1>
<input type="button" value="click" onclick="showAlert()">
</body>
</html>
This is my javascript file.
function showAlert() {
alert("Hello");
}
This is the file directory where the javascript is stored.
Output
CSS works correctly.
But Javsascript doesn't work. Nothing happens when I click the button.
Update
So if I just put a alert in the test.js outside of any function, it works. The alert is displayed when the page loads.
alert("hello");
So, this means the js file is linked properly.
But if I put the code in a function like earlier and link it to a button it doesn't work.
You aren't actually executing your function.
Your code should be:
function showAlert() {
alert("Hello");
}
showAlert();
For buttons, it should be:
<button onclick="showAlert()">Button</button>
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
I found this jsfiddle code, and I need it and I want to try that in my php file, but it doesn't work, whereas it's the same code, i just copied and paste and I don't change anything, but it still doesn't work.
My Code:
<!DOCTYPE html>
<?php
?>
<html>
<head>
<title></title>
<script>
$("#update").click(function() {
$("#counter").html(function(i, val) {
return val*1+1
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
</head>
<body>
<button id="update" type="button">Click Me</button>
<div id="counter">10</div>
<?php
?>
</body>
</html>
Please show me my fault. Any help would be appreciated!
You should really be able to debug this yourself. Open your javascript console, and notice it says ReferenceError: $ is not defined. This means jquery isn't loaded. Now look at the URL you put in your script-src. Why does it end with in .jss? You have a typo there.
If you correct that you'll still get the same error. Why? Because you use jquery before including it. So put the included jquery library before the custom code.
Now, it still won't work. Why? Because you attach an event before the DOM is loaded; so when your script is processed, the button doesn't exist! So have a look at http://api.jquery.com/ready/ and you should know what to add, wrap your javascript inside $(function() {...}) and you're good to go
Maybe it's just a typo in jquery.min.jss
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.jss"></script>
it must be jquery.min.js
Or you placed your javascript before the jquery reference.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#target').click(function() {
$('#output').html(function(i, val) { return val*1+1 });
});
});
</script>
</head>
<body>
<button id="target" type="button">Click Me</button>
<div id="output">10</div>
</body>
</html>
I'm trying to figure out how to use rx.js with a dog-simple example, but can't figure out what reference or file I'm missing that means it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>
That's literally it. The script line correctly loads a local copy of rx.js 2.4.1 freshly downloaded from nuget.
I'm getting the error Rx.Observable.fromEvent is not a function, so I'm assuming that there is a missing reference.
It might just be the time of night, but I'm struggling to see what I'm doing wrong. Any help?
Resolved by downloading and using additional Rx files rx.async.js and rx.binding.js like so:
<!DOCTYPE html>
<html>
<head>
<title>Empty</title>
<script src="/Scripts/rx.js"></script>
<script src="/Scripts/rx.async.js"></script>
<script src="/Scripts/rx.binding.js"></script>
</head>
<body>
<script>
var thing = Rx.Observable.fromEvent(document, 'keydown');
</script>
</body>
</html>