<!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>
Related
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
I am using the above code to mimic the default confirm dialog window action. The function is working fine. But upon clicking the the button mytest() is called and it makes the div #mymodal visible with two buttons as expected. But when you click the Yes or No button it makes the div hidden but it loops through the MyConfirm function multiple times. It can be seen in console. Can any one please explain me why I am getting this weird response. My aim is to create an alternate for confirm() fn. with a return value.
The problem is that you bind a new click event to confirm buttons each time MyConfirm() function executes. click event binding doesn't override old bindings but adds a new function to that event.
You can add $('input[id^=cfrm_]').off('click'); to delete old bindings before binding new one.
function MyConfirm(message, callback) {
console.log("In My Confirm");
var ids = document.getElementById("mymodal");
$('#MyText').html(message);
ids.style.display = "block"
$('input[id^=cfrm_]').off('click');
$('input[id^=cfrm_]').click(function (e) {
e.preventDefault();
console.log("In Click Event");
if (typeof callback === 'function') {
callback($(this).attr('value'));
}
ids.style.display = "none"
});
}
var as="My Test Message";
function mytest(){
var na = MyConfirm(as, function (result) {
console.log("Result: "+result)
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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">
<head>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" onclick="mytest()" value="button" /></div>
<div id="mymodal" style="display:none">
<div id="MyText"></div>
<input id="cfrm_btnYes" type="button" value="Yes" />
<input id="cfrm_btnNo" type="button" value="No" />
</div>
</form>
</body>
</html>
Please try with return. Maybe it will be ready.
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()".
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.