I'm trying to debug a JavaScript in Firefox's debugger, and it won't let me set any breakpoints, and all the step buttons (step into, step out) are grayed out. I also tried Firebug, and I have the exact same results - no breakpoints, step buttons grayed out. What gives? This is my first post here, and I apologize for my messy code here. Anywho, here's my code:
<?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">
<head>
<title>Page 452 - Exercise 11.7</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<script>
function buttonClicked() {
var article = ["the", "a", "one", "some", "any"];
var noun = ["boy", "girl", "dog", "town", "car"];
var verb = ["drove", "jumped", "ran", "walked", "skipped"];
var preposition = ["to", "from", "over", "under", "on"];
var story = "Once upon a time, ";
var sentence = "";
alert (sentence);
var output = document.getElementById("textArea");
output.value = "";
for (var i=0; i<=3; i++){
sentence += article[Math.floor(Math.random()*article.length)] + " ";
alert(sentence.charAt(0));
alert("Story is " + story);
/* if (charAt(sentence[0-3]) == ".") {
sentence +=
} */
sentence += noun[Math.floor(Math.random()*noun.length)] + " ";
sentence += verb[Math.floor(Math.random()*verb.length)] + " ";
sentence +=
preposition[Math.floor(Math.random()*preposition.length)] + " ";
sentence += article[Math.floor(Math.random()*article.length)] + " ";
sentence += noun[Math.floor(Math.random()*noun.length)] + ". ";
story += sentence;
output.value = story;
window.alert (sentence);
window.alert (story);
// sentence ="";
}
story += "THE END";
// output.value = sentence;
}
</script>
</head>
<body>
<p>Click the button for a funny story!<br/>
<input type="button" id="go" onclick="buttonClicked()" value="Go!"/><br/></p>
<textarea id="textArea" rows="10" cols="30"></textarea>
</body>
</html>
Related
I have on jsp page:
<script type="application/javascript">
var test = {};
test.id = ${docId};
test.message = ${message};
</script>
If message equal:
'hello world'
I'll get error in page: "Uncaught SyntaxError: Invalid or unexpected token"
How set string value in js? if value have \n, \' or other formatting symbols
An Example on Glassfish4 server.
The following JSP:
<!DOCTYPE html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>initJsObject</title>
</head>
<body>
<!-- prepare attributes, just for testing -->
<c:set var="docId" value="123"></c:set>
<c:set var="message" value="'hello world'"></c:set>
<c:set var="lines" value="'line1\nline2'"></c:set>
<c:set var="backslashN" value="'\\\\\n'"></c:set>
<textarea id="txt" style="height: 200px; width: 200px;"></textarea>
<script type="text/javascript">
var test = {};
test.id = ${docId};
test.message = ${message};
test.lines = ${lines};
test.backslashN = ${backslashN};
console.log(test);
document.getElementById("txt").value += "id: " + test.id + "\n";
document.getElementById("txt").value += "message:" + test.message + "\n\n";
document.getElementById("txt").value += "lines:\n"+ test.lines + "\n\n";
document.getElementById("txt").value += "backslashN: ("+ test.backslashN + ")\n\n";
</script>
</body>
</html>
generates the html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>initJsObject</title>
</head>
<body>
<!-- prepare attributes fot testing -->
<textarea id="txt" style="height: 200px; width: 200px;"></textarea>
<script type="text/javascript">
var test = {};
test.id = 123;
test.message = 'hello world';
test.lines = 'line1\nline2';
test.backslashN = '\\n';
console.log(test);
document.getElementById("txt").value += "id: " + test.id + "\n";
document.getElementById("txt").value += "message:" + test.message + "\n\n";
document.getElementById("txt").value += "lines:\n"+ test.lines + "\n\n";
document.getElementById("txt").value += "backslashN: ("+ test.backslashN + ")\n\n";
</script>
</body>
</html>
And outputs in browser:
id: 123
message:hello world
lines:
line1
line2
backslashN: (\n)
As you see the \n in the attribute string 'line1\nline2' will be evaluated as new line.
On the other side, if you need the sting \n to be presented as text, you need to escape '\\\\\n'
I have found this tidbit of code - which works fine.
But I also need an associated Identification ID pass along with the name.
So example has state say "California" - but I also have a unique ID associated to Califonrnia say "yye4" etc...
I can create my list easily with coldfusion as below.
var getStates = function(){
return [<cfoutput query=ulist>"#username#",</cfoutput>];
}
But I also need to pass a unique number in the form as well that is also associated to each username.
Thoughts?
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<cfajaximport tags="cfinput-autosuggest">
<script>
var init = function()
{
autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('state');
autosuggestobj.itemSelectEvent.subscribe(foo);
}
var foo = function(event,args)
{
var msg = "";
msg = msg + "Event: " + event + "\n\n";
msg = msg + "Selected Item: " + args[2] + "\n\n";
msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
alert(msg);
}
var getStates = function(){
return ["California","Connecticut","Colorado","Illinois","Alabama","Iowa","Utah","Alaska"];
}
</script>
</head>
<body>
<h3>Attaching an event handler to the autosuggest object</h3>
<cfform name="mycfform" method="post" >
State:<BR>
<cfinput
type="text"
name="state"
autosuggest="javascript:getStates({cfautosuggestvalue})"
autosuggestMinLength=1
autosuggestBindDelay=1>
<cfset ajaxOnLoad("init")>
</cfform>
</body>
</html>
This, roughly? I used a text box rather than a hidden field so you could see it in action.
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<cfajaximport tags="cfinput-autosuggest">
<script>
// itcodes would contain the unique numbers instead of sample names.
var itCodes = ["Callie","Connie","Col","Illiana","Allie","Fred","Daphne","Alex"];
var itNames = [];
var init = function()
{
autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('state');
autosuggestobj.itemSelectEvent.subscribe(foo);
}
var foo = function(event,args)
{
var msg = "";
var nameIndex = itNames.indexOf(document.getElementById('state').value);
msg = msg + "Event: " + event + "\n\n";
msg = msg + "Selected Item: " + args[2] + "\n\n";
msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
document.getElementById('hCodes').value = itCodes[nameIndex];
alert(msg);
}
var getStates = function(){
itNames = ["California","Connecticut","Colorado","Illinois","Alabama","Iowa","Utah","Alaska"];
return itNames;
}
</script>
</head>
<body>
<h3>Attaching an event handler to the autosuggest object</h3>
<cfform name="mycfform" method="post" >
State:<BR>
<cfinput
type="text"
name="state" id="state"
autosuggest="javascript:getStates({cfautosuggestvalue})"
autosuggestMinLength=1
autosuggestBindDelay=1>
<input type="text" id="hCodes" name="hCodes" value="">
<cfset ajaxOnLoad("init")>
</cfform>
Im currently making a simple color picker for school. Well it should be simple, however my programming in Javascript is really bad. It contains an array with the names, and a array with the codes. The codes will only contain 00, 33, 66, 99, ff, cc and the code is only 6 chars long as some of you know. With a loop i manage to print everything on screen, but now i want to make the background color the same color as the one im clicking. And i want the code of the one that im clicking in a textbox.
So heres my code:
DHTML with jQuery: Opdracht 4
<script type="text/javascript">
function showPicker(source) {
var hex = new Array('00', '33', '66','99','CC','FF');
var colorNames = new Array(
"black", // #000000
"weak blue", // #000033
"obsure dull blue", // #000066
"dark faded blue", // #000099
);
var count = 0;
document.writeln('<table width="1200" height="600">');
for(var x in hex) {
document.writeln('<tr>');
for(var y in hex) {
for(var z in hex) {
var color = hex[x] + "" + hex[y] + "" + hex[z];
document.writeln('<td bgcolor="#'+color+'" title="#'+color + ' ' + colorNames[count] + '" onclick="'+source+' (\''+color+'\',\''+colorNames[count]+'\')"></td>');
count++;
}
}
document.writeln('</tr>');
}
document.writeln('</table>');
}
showPicker('showFontColor');
</script>
</head>
<body>
<input type="text" id="color"/>
</body>
</html>
I tried a line in the onclick button, but i realised that wont work. Do you guys have any suggestions? And sorry if it looks a little messy, as I said I am a real nub in javascript.
EDIT:
Working code:
<!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" />
<title>DHTML with jQuery: Opdracht 4</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function changeBg(color){
var currentColor = $('#printColor').val();
$('#input').css('background', currentColor);
}
function printColor(color) {
$('#printColor').val(color);
$("#input").on("click", function() {
$(this).css("background", "printColor");
});
}
function changeFG() {
var currentColor = $('#printColor').val();
$('#input').css('color', currentColor);
}
function showPicker(source) {
var hex = new Array('00', '33', '66','99','CC','FF');
var colorNames = new Array(
"black", // #000000
"weak blue", // #000033
"obsure dull blue", // #000066
);
var count = 0;
document.writeln('<table width="800" height="300">');
for(var x in hex) {
document.writeln('<tr>');
for(var y in hex) {
for(var z in hex) {
var color = hex[x] + "" + hex[y] + "" + hex[z];
document.writeln('<td bgcolor="#' + color + '" title="#' + color + ' ' + colorNames[count] + '" onclick="javascript:printColor(\'#'+color+'\')" ' + source + '(\'' + color + '\',\'' + colorNames[count] + '\')"></td>');
count++;
var source = function(color){
document.body.style.background = "#" + color;
}
}
}
document.writeln('</tr>');
}
document.writeln('</table>');
}
showPicker('showFontColor');
</script>
</head>
<body>
<div id="input">
<input type="text" id="printColor" name="printColor" />
Change Background / Foreground color!
<p> Lorem ipsum blablabla</p>
</div>
</body>
</html>
Without making too much changes to your code I think this is what you want.
I just changed your array into an object so that you can map the hex code of the color to the name and declared the changeBg function. Just fill in the rest of the colors.
<body>
<script type="text/javascript">
(function(){
var colorNames = {
"000000": "black",
"000033": "weak blue",
"000066": "obsure dull blue",
"000099": "dark faded blue"
//...rest of colors
};
window.changeBg = function(color){
document.body.style.background = "#" + color;
document.getElementById("color").value = colorNames[color];
}
var showPicker = function(source) {
var hex = new Array('00', '33', '66','99','CC','FF');
var count = 0;
document.writeln('<table width="1200" height="600">');
for(var x in hex) {
document.writeln('<tr>');
for(var y in hex) {
for(var z in hex) {
var color = hex[x] + "" + hex[y] + "" + hex[z];
document.writeln('<td bgcolor="#'+color+'" title="#'+color +'" onclick=changeBg(\''+color+'\')></td>');
count++;
}
}
document.writeln('</tr>');
}
document.writeln('</table>');
}
showPicker();
})();
</script>
<input type="text" id="color" readonly = true/>
</body>
pretty new to javascript and doing some examples from a book, can't understand why this isn't producing any text strings on the page when loaded.
function init()
{
var sum = 80 + 20;
var sub = sum - 50;
var mul = sum * 5;
var div = sum / 4;
var mod = sum % 2;
var inc = ++sum;
var dec = --sum;
var str = "Sum: " + sum;
str += "<br>Subtraction: " + sub;
str += "<br>Multiplication: " + mul;
str += "<br>Division: " + div;
str += "<br>Modulus: " + mod;
str += "<br>Increment: " + inc;
str += "<br>Decrement: " + dec;
document.getElementById( "Panel" ).innerHTML = str;
}
document.addEventListener("DOMContentLoaded" , init , false);
And the html5 code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="arithmetic.js"></script>
<title>Doing Arithmetic</title>
</head>
<body>
<div id="panel"> </div>
</body>
</html>
Your <div> has an id of panel, not Panel. The IDs need to match. So you can either change the JavaScript code:
document.getElementById( "panel" )
or the HTML:
<div id="Panel"> </div>
Replace
<div id="panel"> </div>
with
<div id="Panel"> </div>
and it will work. P in panel should be capital.
The example below writes tag [code] and [/code] to selected text in textarea but only applied to begin and at the end of the string... I'd like to have [code] and [/code]
applied to every part of the strings considerating newline as new string...
example posted performs:
[code]test
test
test[/code]
I'd like to apply instead:
blablabla...
[code]test[/code]
[code]miao miao[/code]
[code]this is teh 3rd string[/code]
etcetera, some extra string
as you can see I'd like to apply code only selected string considerating a new string with newline... it's possible in pure javascript? No jquery or mootools, please only standalone script...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>[javascript code]</title>
<script language="JavaScript" type="text/javascript">
var myValueBefore = "[code]";
var myValueAfter = "[/code]";
function applyCode(myField, myValueBefore, myValueAfter) {
if (document.selection) {
myField.focus();
document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter;
} else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValueBefore+ myField.value.substring(startPos, endPos)+ myValueAfter+ myField.value.substring(endPos, myField.value.length);
}
}
</script>
</head>
<body>
<br><br><br>
<table align="center" border="0" cellpadding="15" cellspacing="0" width="70%">
<tr>
<td>
<form action="#" method="post">
<input type="button" value="Apply Code" onclick="javascript:applyCode(test, myValueBefore, myValueAfter);"><br>
<textarea rows="5" cols="130" name="test"></textarea>
</form>
</td>
</tr>
</table>
</body>
</html>
You can develope this codesnippet further:
var myValueBefore = '[code]',
myValueAfter = '[/code]';
function applyCode(myField, myValueBefore, myValueAfter) {
var newLine = new RegExp('\n|\r\n', 'g'), range, selectedText, beforeSelectedText, afterSelectedText;
if (document.selection) {
range = document.selection.createRange();
range.text = myValueBefore + range.text.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter;
return;
} else {
beforeSelectedText = myField.value.substring(0, myField.selectionStart);
afterSelectedText = myField.value.substr(myField.selectionEnd);
selectedText = myField.value.substring(myField.selectionStart, myField.selectionEnd);
myField.value = beforeSelectedText + myValueBefore + selectedText.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter + afterSelectedText;
}
return;
}
A live demo at jsFddle.