I am new to Javascript and am trying to make a Javascript .click function. Upon clicking button id #btnTransfer, I want it to check against the listed account id value(s) and throw an error message if it matches a listed value. Here is the code im using. The user's input id #accountid is already printed on the webpage via asp, but is hidden from view. Any help would be greatly appreciated :)
$('#btnTransfer').click(function () {
if ($('#accountid').val() == "123456789") {
popError("Error you cannot preform this action");
}
your code is write https://api.jquery.com/click/ i dont understand what u really want to do explain me more or give us more code
You are missing a closing brace and closing parenthesis. Once those syntax issues are fixed and the reference to jQuery included, it works exactly as you said you wanted it to. I don't know what your popError function is like, so I just have it displaying an alert.
function popError(message) {
alert(message);
}
$('#btnTransfer').click(function () {
if ($('#accountid').val() == "123456789") {
popError("Error you cannot preform this action");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnTransfer">Transfer</button>
<input type="hidden" id="accountid" value="123456789" />
Related
I have no idea whats going on with this but I have a website with this html:
<button id="mute"><input type="image" src="img/stop.png" class="stop" onclick="toggleStop(this);"/></button>
<button id="mute2"><input type="image" src="img/sonido.png" class="mute stop" onclick="toggle(this);"/></button>
And I'm trying to toggle the image when ON CLICK with this JS:
<script type="text/javascript">
function toggle(el){
if(el.className!="mute")
{
el.src='img/mute.png';
el.className="mute";
}
else if(el.className=="mute")
{
el.src='img/sonido.png';
el.className="audio";
}
return false;
}
</script>
<script>
function toggleStop(event){
if(el.className!="play")
{
el.src='img/play.png';
el.className="play";
}
else if(el.className=="play")
{
el.src='img/stop.png';
el.className="stop";
}
return false;
}
</script>
It works perfect on Chrome, but it doesnt work on Firefox. I have no clue what's wrong. Sadly I'm no developer, so I do what I can searching on the Internet. Any help would be appreciated.
There is no way this code, as posted, can run under Chrome (or Firefox or any other browser.)
I tried turning it into a snippet but had to make a number of changes to get it usable ... then I stopped trying.
Main issues:
You can't nest an <input> instead of a <button>. Use one or the other.
If you use <button>, it should be <button type="button"> to keep it from acting as a submit button and reloading your form.
Your code is broken.
function toggleStop(event){
if(el.className!="play")
There is no element el and an error is generated.
The first rule of JavaScript work: ALWAYS, ALWAYS check the error console.
So...I took what you said about an INPUT inside an BUTTON and I just delete the button and use an isntead and now it works on both browsers.
Thanks a lot Jeremy!
I am trying to make jsfiddle , my onclick is not working in jsfiddle. what is wrong in my code
<input value="press" type="button" onclick="myclick()">
function myclick(){
alert("myclick")
}
http://jsfiddle.net/hiteshbhilai2010/gs6rehnx/11/
EDIT
I tried No wrap - In head and tried again with document.ready it is not working in jsfiddle again
ERROR - Uncaught ReferenceError: myclick is not defined
http://jsfiddle.net/hiteshbhilai2010/33wLs160/6/
I have checked with already existing question here but my problem is happening when I am trying it in jsfiddle
Can some one please help me ....thanks
You need to select No library (pure JS) and No wrap - in head. Then it will work as a simple HTML with javascript page.
This will be inserted in a <script> element in the <head>:
function myclick(){
alert("myclick")
}
See demo
As others said, for first case you have to set No wrap - in <head> or No wrap - in <body> as javascript panel settings (the blue link at js panel top-right).
For the second (your Edit) question, your code inside a function and the js will run it (within a new context), but it will do nothing as you just define a function and ignore it without any call or assignment.
if you call alert(myclick) you will see all the code is executed and its defined at that point. see this fiddle
$(document).ready(function() {
//alert("ready is executed");
function myclick(){
alert("myclick is called")
window.location.reload(true);
}
alert(myclick); //this will show the myclick is a defined function!
//document.getElementsByTagName("input")[0].onclick = myclick;
})
if you call this:
document.getElementsByTagName("input")[0].onclick = myclick;
in that $(document).ready({...}) scope, it will be assigned to the button and works as you wish.
<input value="press" id='a' type="button">
document.getElementById('a').onclick = function() { alert(1); }
http://jsfiddle.net/gs6rehnx/12/
This one is working. Just remove it from document ready event. Also semicolons are optional in javascript but i advice to use them.
function myclick() {
alert("myclick");
window.location.reload(true);
}
<input value="press" type="button" onclick="myclick();">
<script>
alert("home");
</script>
Here is the fiddle.
Select "No wrap - bottom of " in "Load Type" of the scripting panel.
This is the solution for Jsfiddle (till 17 december 2019).
This is most strange.
First: I suspect it has to do with my machine.
My problem is simple, I cannot get a conditional stamen to fire on first click. after the first click all is fine and works as should. This is only true for what I am writing recently, all my old files with similar statements work fine and can copy and paste from 3schools with no problems.
If I remove the conditional statement things works as expected, for example if I put the single statement in the tag onclick event it works on first click and is also true for a simple function but not the conditional statement. I have test code below though I am not sure if it will help as I know the code work and think that the first click finds the function but doesn't fire it. As the code shows I have tried a couple of events with the same results.
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="visible") {
alert("yes");
}
else {
test.style.visibility="visible";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
Something is having a bad hair day and I am not finding it. Any thoughts that are intelligent would be most appreciated, and verification that the coding is doing the same for others would also help. I am wounding if it might have to do with text encoding on my machine, though all works everywhere else code can have strang results if some sort of text formatting gets applied like writing code in MS Word.
Thanks
The answer below hit the nail on the head or returns true.
To make this work without a declared style in the tag the condition is written like this
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="") {
test.style.visibility="hidden";
}
else {
test.style.visibility="";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
I should of caught this but that's what one get when they assume, just as I assumed that because the style was declared in the head that the attribute carried over to the element, it doesn't.
hope this helps someone avoid the headache I just went through.
If you debug your function, you will find that test.style.visibility on first run is nothing as this css property is not set to anything for your element initially. As a result, your first run goes into your else and then sets this property. Now, since you have set the value to "visible" in the first run, every subsequent run alerts.
I am trying to allow a global function to be called and pass text into an alert box, which is set at the top of the page.
My code is:
<script>
$(document).ready(function () {
$('.fadehelper').fadeIn('slow');
function msg(data, type) {
$('.warning').slideDown("slow").delay(1500).slideUp("slow");
}
});
</script>
And the message box is:
<div class="warning">Help me!</div>
I am not really sure how to do this..
I want to pass a type and a message. The class will be the type, and the message will do where the "Warning" goes.
So if I go somewhere in the page and go msg(warning, "help me!"); I want that to be translated like above.
Can you help? Thank you.
First of all, put an id attribute on the div so that it can be found easily. I will assume you are using alertbox as the id in the following function
Add the following to the end of the msg function:
var box=document.getElementById('alertbox');
box.setAttribute('class',type);
box.innerHTML=data;
It can probably be done shorter in jquery but I don't use jquery
function msg(type, data){
var box=document.getElementById('alertbox');
box.setAttribute('class',type);
box.innerHTML=data;
$('#alertbox').slideDown("slow").delay(1500).slideUp("slow");
}
Got it!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
“uncaught TypeError: Object is not a function” in JavaScript
my full js file is this:
function addInning() {
alert("hello");
}
my html file has the element
<input name="addInning" type="button" value="Add Inning" id="addInning" onclick="addInning();">
and the code will not execute. for the life of me i cannot figure out why, as this is just about the simplest thing possible. the error from chrome is "Uncaught TypeError: object is not a function". I searched on stackoverflow and the solutions posted have not been helpful. i feel like i'm losing my mind.
full code here: http://jsfiddle.net/BUsPC/
The issue is that in onclick="addInning();", addInning is referring to the input element because that's the value set for its name and id attributes. This behavior seems to be prompted only when the input tag is a child of a form element.
This DEMO highlights that behavior.
To solve your problem, either change the name of both the input's id and name, or the name of addInning. Also, you could explicitly refer to the global function like this:
onclick="window.addInning();"
Take a look at your working fiddle using the latter option. Be careful with JSFiddle because it wraps all JS in an window.onload event by default. You could keep the default behavior by defining addInning like so:
window.addInning = function () {
alert("hello");
};
I learnt something new!
Change the name and id from "addInning" to something else. This worked for me.
<script type="text/javascript">
function addInning()
{
alert("hello");
}
</script>
<input name="addInning2" type="button" value="Add Inning" id="addInning2" onclick="addInning();">
Since its a function, try returning something:
function addInning() {
alert("hello");
return true; // or return false; to prevent the click
}