I hope my fumbling amateur code doesn't offend, but I'm writing a very simple Caesar cipher program and I'm running into an odd problem. When I run this page in eclipse or Firefox it works fine but when I run it in chrome (so I can take advantage of the development tools I know) it can't find the translate function when I click the button.
index.html:62 Uncaught TypeError: translate is not a function
Any clue what's happening?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Decoder Ring Program</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
codeWheel = "abcdefghijklmnopqrstuvwxyz";
$(document).ready(function(){
document.getElementById('codeWheel').innerHTML = codeWheel.toUpperCase();
});
function isAlpha(str) {
return str.length === 1 && str.toLowerCase().match(/[a-z]/i);
}
function translate() {
plaintext = document.getElementById('inputText').value.toLowerCase();
key = document.getElementById('key').value.toLowerCase().charCodeAt() - 'a'.charCodeAt();
translated = "";
direction = document.querySelector('input[name = "direction"]:checked').value;
for (i = 0; i < plaintext.length; i++) {
letter = plaintext[i];
letterValue = plaintext[i].charCodeAt() - 'a'.charCodeAt();
if (!isAlpha(plaintext[i])) {
translated += letter;
} else {
if (direction == 'encode') {
translated += codeWheel[(letterValue + key) % 26];
} else {
index = codeWheel.indexOf(letter);
translated+= String.fromCharCode('a'.charCodeAt() + (26 + index - key) % 26);
}
}
}
document.getElementById('output').innerHTML = translated.toUpperCase();
}
</script>
</head>
<body>
<h1>Decoder Ring</h1>
<div id="codeWheel"></div>
<hr/>
<div>
PlainText <input type="text" name="inputText" id="inputText"></input><br/>
Key <input type="text" name="key" id="key"></input>
<form>
<input type="radio" name="direction" value="encode" checked>Encode
<input type="radio" name="direction" value="decode" >Decode
</form>
<button onclick="translate()">Translate</button>
</div>
<hr/>
<div id="output"></div>
</body>
</html>
Apparently, this is because in the context of an on* attribute, properties of the element triggering the event shadow global variables.
Check it out!:
var id = "I get shadowed";
<button id="testing" onclick="alert(id)">click me</button>
In Chrome, translate is a boolean property of a button, but Firefox has no such property.
You may have heard onclick and company are bad-practice, I'd recommend using addEventListener instead. Alternately, you could change your function name to something which does not collide, or use onclick="window.translate()".
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
i = i + 1;
var Source = document.getElementById('P').src;
document.getElementById('P').src = Source.replace(i - 1, i);
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="Images/Para/P-1.jpg"></div>
<div><img id="Q" src="Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>
actually I want a create html page which can load images. But this code returns load failed p-3.jpg. i could not understand why this is happening.First it loads P-1.jpg after p-2.jpg and after clicking Second time it not load and gives load Failed.Please Help
If i understand correctly then i think the problem is here with you replace() function , js replace() function replace the first parameter with its second parameter . so when you are taking the src of img object by
var Source = document.getElementById('P').src;
it is taking the whole src of the object , according to this here you have image path also correct ?
which is Images/Para/P-1.jpg , so when you are replacing the src by using replace function , in the next it retain only the value of i = i + 1; ,
i think you can try something like this
Source.replace("Images/Para/P-"+i - 1+".jpg", "Images/Para/P-"+i+".jpg");
to suggest you about something i can say please follow the convection of variable declaration , here you used var Source there is reserved keyword Source in JavaScript. it may conflict with the reserved keyword ,
please let me know you get it done correctly . if not then feel free to ask me again
This works by me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var i = 1;
window.onunload = function() {
debugger;
}
function Para() {
var previous = i;
var previousP = "P-" + previous.toString();
i = i + 1;
var Source = document.getElementById('P').src;
var newP = "P-" + i.toString();
var res = Source.replace(previousP, newP);
document.getElementById('P').src = res;
}
</script>
</head>
<body>
<div><img alt="image" id="P" src="/Images/Para/P-1.jpg"></div>
<div><img id="Q" src="/Images/Q/P-1-Q-1.jpg" </div>
<div><img id="A" src="/Images/A/P-1-Q-1-A-1.png"></div> <input id="Button1" type="button" value="Next Parigraph" onclick="Para()" /> <input id="Button2" type="button" value="Next Question" /> <input id="Button3" type="button" value="Next Answer" /> </body>
</html>
Function: Enter a phone number (ex: 555-555-5555) into a text field. The text field prints the number out flat (hidden by CSS). Then Javascript picks up that number by ID and splits it apart by the hyphens and injects the array split up into a FoneFinder URL search string to display the results from that site in a pop-up window.
Problem: The pop-up is working fine, however when I click on the link to spawn the link it opens in the main page as well as the pop-up. The main page should not change.
The pop-up code works fine on other pages and doesnt overwrite the main page. It has to be how the javascript is injecting the html link into the page that is messing it up, but I cant figure out why.
Any help or insights would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
$("#target_num_search").html(" <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=NewWindow(this.href,'FoneFinderLookup','740','680','yes');>!BETA!FoneFinder Search!BETA!</a>");
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
what you need to add is the following:
$('#target_num_search').on('click', 'a', function (event) {
event.preventDefault();
var url = $(this).attr('href');
NewWindow(url,'FoneFinderLookup','740','680','yes');
})
This way you can remove the onclick attribute and move the function call to js. See the working jsfiddle
you should return false for prevents default action to go link 'href' when onlick event.
(please notes , - comma operator to whatever Function returns... It's just hack. don't use.)
BTW,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#target_num_result {
display: none;
}
#target_num_search {
font-size: small;
}
</style>
<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
</script>
<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#target_num').on('keyup', function() {
var my_value = $(this).val();
$('#target_num_result').html(my_value);
var arr = my_value.split('-');
var html_tpl = " <a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=\"return NewWindow(this.href,'FoneFinderLookup','740','680','yes'), false\" target='_blank'>!BETA!FoneFinder Search!BETA!</a>";
$("#target_num_search").html(html_tpl);
});
});//]]>
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table cellpadding="2" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 180px">Phone #:</td>
<td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
</tr>
</table>
<label>
<input class="button" type="submit" name="submit" id="submit" value="Create" />
</label>
</form>
</body>
</html>
console.log(value); does not log anything but the number on the left is incrimented everyime i click and it indicates that the console.log() call is made, just not showing what I put into it.
Also, a side question is how could I do this if the javascript is in a different file? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Star Delete</title>
<!--<script type="text/javascript" src="StarDelete.js"></script>-->
</head>
<body>OKAY DELETE STAR YES ;D!
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
<script type ="text/javascript">
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
//value = document.getElementById("formValueId").value;
button.onclick = function() {
console.log(value);
}
</script>
</body>
</html>
http://jsfiddle.net/3wjRJ/1/
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
Here you go, the issue was that you were declaring the value variable when the javascript was first loaded, therefore it was always blank.
Have been trying to add a custom button for about 2 hours and I just can't get it to work. I don't know much about javascript maybe that's why. I did manage to get the button to show up and open a popup, but that's as far as I got.
I want the button to insert t he following into the HTML section of tinymce:
'
Here is my dialog.js file:
tinyMCEPopup.requireLangPack();
var InsertQuoteDialog = {
init: function () {
var s = tinyMCEPopup.editor.selection.getContent({ format: 'text' });
if (s.trim().length > 0) {
document.forms[0].blizzQuote.value = s.trim();
}
},
insert: function () {
var s1 = '<p class="blizzardQuote" ';
s1 += Encoder.htmlEncode(document.forms[0].blizzQuote.value.trim()) + '</p>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, s1);
tinyMCEPopup.close();
}
};
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
tinyMCEPopup.onInit.add(InsertQuoteDialog.init, InsertQuoteDialog);
And my Dialog.htm file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{#example_dlg.title}</title>
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
</head>
<body>
<form onsubmit="InsertQuoteDialog.insert();return false;" action="#">
<p>Blizzard Quote</p>
<p>Blizzard Quote: <input id="blizzQuote" name="blizzQuote" type="text" class="text" /></p>
<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{#insert}" onclick="InsertQuoteDialog.insert();" />
</div>
<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>
Basically when I click on insert nothing happens.
Thanks.
A quick look at the javaScript console should show you that you are getting a JavaScript error on the dialog with the Encoder object not being known.
Simply include the JS file that defines Encoder on your dialog and it should all be good.
I am trying ot implement the passing of variables with get between formulars and I basically use the split() method to recover the variable on each page. The problem that I have is that the script is stopped when I implement the splitting.
It wasn't doing so earlier and now that I added the second function to check all the values of all the input names, I get this problem. I am new to javacsript so I don't really know where to look for and on top of this I really need to be able to get the variable's value.
Here are the html of the first form and of the second one, with the url.split("?"); causing firefox and my computer to get lost in the process...
Here the first page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div>Choose between<br />
<form name="fo" method="get" action="part1.html">
<input type="radio" name="s1" value="1" />one<br />
<input type="radio" name="s2" value="2" />two<br />
<input type="radio" name="s3" value="3" />three<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
here the part1.html page, that contains the buggy script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script type="text/javascript">
<!--
function gValue(varname) {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (i=0;i<vars.length;i++) {
var parts = vars[i].split("=");
if (parts[0] == varname) {
value = parts[1];
break;
}
}
return value;
}
function subnewsc() {
for(i=1;i<=3;i++) {
var schck = "s" + i;
var score = gValue(schck);
score = parseInt(score);
i = parseInt(i);
var newscore = score+i;
var doc = "document.fo.s" + i;
doc.value=newscore;
}
}
// -->
</script>
</head>
<body onload="subnewsc();">
<div>choose between<br />
<form name="fo" method="get" action="part2.html">
<input type="radio" name="s1" value="1" />one again<br />
<input type="radio" name="s2" value="2" />two again<br />
<input type="radio" name="s3" value="3" />three again<br />
<input type="submit" value="continuer" />
</form>
</div>
</body>
</html>
You are changing the loop iterator in other loop, causing infinite loop.
Change this line:
for (i=0;i<vars.length;i++) {
To this:
for (var i=0; i<vars.length; i++) {
And you won't get into infinite loop.
Some explanation is required.. in the function subnewsc you have loop, using i as the loop iterator. As you don't have var before, it's becoming global variable. Now inside that loop you call the function gValue where you also have loop, again using i as the loop iterator and without the var it means using the same variable as in the first loop. This of course is causing havoc.
For example, when you read the value of second querystring item, i will have value of 1 after you call var score = gValue(schck); so it will never get more than 3.
By adding the var keyword you'll make the variable have local scope and solve all this mess.