My onClick button will not execute the JavaScript - javascript

This is my javascipt function: I am trying to swap an image, en be able to swap it back again with a button. But for some reason, it won't execute the script.
Javascript
function changeImage() {
if (document.GetElementById('flashlight').src == "img\flashlight.png") {
image.src="img\flashlightON.png";
} else (document.GetElementById('flashlight').src == "img\flashlightON.png"); {
image.src="img\flashlight.png";
}
}
and here is my HTML:
<button type="button" onClick="changeImage()" class="classname"> </button>

Javascript is case sensitive. In your case it is getElementById and not GetElementById. You placed your alert probably as the first thing in your function and therefore that part worked. Javascript is not precompiled so you just get the syntax error at the moment the line is trying to be executed.
You can use firebug to debug javascript.

You have syntax errors. Use this:
function changeImage() {
var image = document.getElementById('flashlight');
if (image.src == "img/flashlight.png") {
image.src = "img/flashlightON.png";
} else {
image.src = "img/flashlight.png";
}
}

Javascript is case sensitive so the first mistake is in document.GetElementById. It should have been document.getElementById in order to change the src you can bind the onclick to the button in the js part itself like:
theButton.onclick = function pictureChange()
The complete working example is in this fiddle

Try this... You'll need to add a src to your img in html
function swapImage() {
if (document.getElementById("flashlight").src.endsWith("Images/Image1.png") == true)//Comparison
{
document.getElementById("flashlight").src = "Images/Image2.png";//assignment
}
else if (document.getElementById("flashlight").src.endsWith("Images/Image2.png") == true)
{
document.getElementById("flashlight").src = "Images/Image1.png";
}
}

Related

Go to given url after checking condition

Arter clicking i need to run chkMethode() in javaScript and then I decide is it go to the url or not
When i clicked 'Go' it does not run chkMethode() directly go to the given link. what to do?
Go
It's because JavaScript needs to prevent the anchor from performing its usual event and it does this using preventDefault. Here, as best practice, I've separated out your JS from the HTML and used an id.
HTML
<a id="go" href="http://www.google.com">Go</a>
JS
var go = document.getElementById('go');
go.onclick = chkMethode;
function chkMethode(e) {
e.preventDefault();
if (check) {
window.location.href = this.getAttribute('href');
}
}
function chkMethode(event)
{
if (<<certain condition>>)
{
event.preventDefault();
return false;
}
}
Go
<a onclick="event.preventDefault();chkMethode();" href="http://www.google.com" > Go </a>
Function chkMethode () {
Var valuetochck = // value to be checked
If(valuetochck == "")
{
Window.location.href="url1";
}
Else
{
Window.location.href="url2";
}
}

Button Text Does Not Change jQuery

Okay, I have been messing around with this for a few hours now and decided to ask. I have searched StackOverflow and Google, with no resolution. I am trying to change the text of a button, like below.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1)" value="Correct">
The updatePrice() function is called and checks a few things and at the end I have an if statement that checks the value to see if it is Correct, if it is, it will change the text, or suppose to.
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.text("Update");
}
At this point I have tried everything in this solution jQuery change button text with nothing working. I get the logMessage, but the button still doesn't change.
UPDATE: Nothing seems to be working. I tried everything again in a new function, just in case the other logic was messing with something. After doing a quick test to see if the text was change
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
and the console shows that it changed but doesn't on screen.
Change the innerHTML not the text. Like so:
btnRegUpdate.html("Update");
EDIT:
Just noticed you're using a <input> not a <button>, change the value property:
btnRegUpdate.attr('value', 'Update');
You need
btnRegUpdate.attr("value", "Update")
instead of
btnRegUpdate.text("Update");
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.val() == 'Correct'){
btnRegUpdate.attr('Value',"Update");
}
Try using btnRegUpdate.attr('Value',"Update");
Demo
Try this:
Prevent default action of submit button
Change the value of button using val()
function updatePrice(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
console.log("Button was correct");
btnRegUpdate.val("Update");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1,event)" value="Correct">
The input element's text is defined by its value attribute, not content. To change the text, update the value attribute:
btnRegUpdate.attr('value', "Update");
instead of
btnRegUpdate.text("Update");
With jQuery you can use .html() to change the contents. It works the same as javascript's .innerHtml
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.html('Update')
}
Add return false to the click handler.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1); return false;" value="Correct">
Otherwise the page will attempt to submit and reload.
Your function look good and i don't know it's not working.
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
I suggest you check in your page and find id "btnRegUpdate", maybe it appear more than one.

How do I merge these two button functions into one, like an on/off switch

How can I merge these two button functions into one, so that the button will toggle from isRunning=true to isRunning=false, back again and so forth? "isRunning" is a variable in a javascript function on the page.
Also I would like to replace the standard button into an image button that I design myself (simple .jpg file). Can anyone help? See the code below:
<button onclick="isRunning = false">hold</button>
<button onclick="isRunning = true">continue</button>
There you go:
<button onclick="isRunning = !isRunning; this.innerHTML = (isRunning) ? 'hold' : 'continue'">hold</button>
For your image attempt:
<img src="hold.jpg" onclick="isRunning = !isRunning; this.src = (isRunning) ? 'hold.jpg' : 'continue.jpg'" />
<button onclick="toggleButton(this)">Toggel Me</button>
Then
function toggleButton(element) {
if(isRunning == false) {
element.innerHTML = "TRUE";
isRunning = true;
} else {
element.innerHTML = "FALSE";
isRunning = false;
}
}
Or even smaller:
<button onclick="toggleButton()">hold</button>
JS:
function toggleButton() {
isRunning = !isRunning;
}
Though you should consider not using "onclick" and instead registering a proper event handler, as suggested in this MDN article. It allows you to separate your code from the HTML, making it easier to maintain and read. Especially when it's more than just one line of code.

.focusout() only reading through first if() statement

Why is this not reading through both if statements even though they are both true?
HTML
<textarea name="test">
Focus out to test prompts
</textarea>
jQuery
var disableA = 1;
var disableB = 1;
$('textarea[name="test"]').focusout(function() {
if (disableA == 1) {
disableX();
}
if (disableB == 1) {
disableY();
}
});
function disableX() {
alert('A is disabled');
}
function disabledY() {
alert('B is disabled');
}
Right now it will call for disableX(); but not disableY()
jsFiddle: http://jsfiddle.net/nCQQm/
In your second function you have called it disabledY, whereas you are calling back disableY()?
You spelled disableY wrong you need to rename it to disabledY()
There is no problem with the if statements.
Running your code gives the error:
ReferenceError: disableY is not defined
You have named the second function disabledY, and then you try to call disableY.

comparing innerHTML value with a string variable in javascript

function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerHTML)
{
alert("New File");
} //close If NewFile.rtf
else {
alert("Not new file");
}
}//close Open()
Here I have string "NewFile.rtf" in a element with id="FName" on the page. When the FName contains "Newfile.rtf" in it it stills goes to the else part of the function instead of going to if part. I tried different ways to write the compare statement in the if condition, no luck . Appreciate the help if anyone can help figure out this.
Thank you.
The simplest explanation is that your cc.innerHTML call is not returning what you think it is returning. Why don't you console.log or debug.
add something like
var innerhtml = cc.innerHTML;
console.log("innerHTML = " + innerhtml) // wont work in IE.
before the if statement.
Try using regular expressions to find your filename, also check if the text you are searching is not into another DOM element, elimate left and right spaces, you should use Google Chrome for debuging the Javascript code:
var html = document.getElementById('FName').innerHTML;
if( html.search("Newfile.rtf") != -1) { /*found*/ }
else { /*not found*/ }
but what's the type of this element? if it's about an input text type .. you can't use innerHTML but you'll use value then.
Use innerText to get that
function Open() {
var cc = document.getElementById('FName');
if ('Newfile.rtf' == cc.innerText)
{
alert("New File");
} //close If NewFile.rtf
else {
//enter code here
alert("Not new file");
}
}

Categories