Inlining Javascript and HTML
» >
» Goto page 1, 2  Next
» View previous topic :: View next topic  
ok, I am totally clueless when it comes to Javascript, but I really need to get this page out. Can someone tell me what I am doing wrong?


Code:
<head><title>The Scarlet Letter</title>
<marquee>The Scarlet Letter chapter one and two</marquee>
</head>

<script type="text/javascript">

function Definition(word define) {

<form>input type="button" value=word onClick="alert(define)"</form>

}

</script>



<body>

<p style="font-size:35px;"> Chapter 2, The Market-Place </p>

 

   The grass-plot before the jail, in Prison Lane, on a certain summer morning, not less than two centuries ago, was occupied by a pretty large number of
the inhabitants of Boston, all with their intently fastened on the iron-clamped oaken door. Amongst any other population, or at a later period in
the history of New England, the grim Definition("rigidity" "stiff or unyielding; not pliant") that petrified the bearded of these good people would have augured some awful business in hand. It could have betokened nothing short
of the anticipated execution of some rioted culprit, on whom the sentence of a legal tribunal had but confirmed the verdict of public sentiment. But, in that early severity of the Puritan character,
an inference of this kind could not so indubitably be drawn. It might be that a sluggish bond-servant, or an undutiful child, whom his parents had
given over to the civil authority, was to be corrected at the whipping-post. It might be that an Antinomian, a Quaker, or other heterodox religionist,
was to be scourged out of the town, or an idle or vagrant Indian, whom the white man's firewater had made riotous about the streets, was to be driven
with stripes into the shadow of the forest. It might be, too, that a witch, like old Mistress Hibbins, the bitter-tempered widow of the magistrate, was to
die upon the gallows. In either case, there was very much the same solemnity of demeanour on the part of the spectators, as befitted a people among whom
religion and law were almost identical, and in whose character both were so thoroughly interfused, that the mildest and severest acts of public discipline
were alike made venerable and awful. Meagre, indeed, and cold, was the sympathy that a transgressor might look for, from such bystanders, at the scaffold.
On the other hand, a penalty which, in our days, would infer a degree of mocking infamy and ridicule, might then be invested with almost as stern a dignity
as the punishment of death itself.

</body>









What are you trying to do? The code is nonsensical as posted.
well I am making a function that has a button and when the button is pressed an alert comes up...

You can't mix HTML into JavaScript blocks like that.

Here's what I think your function should look like:

Code:
<script type="text/javascript">
var Definition = function(define) {
    alert(define);
}
</script>


(function Definition(define) { ... } does much the same thing, but I prefer the above syntax as it emphasises the way that functions are just regular variables in JavaScript).

Your button could then look like this (it doesn't necessarily need to go in a form):


Code:
<input type="button" value="Click me" onClick="Definition('Hello, world')" />


It would be easier to help if we had a better idea of what you were aiming for, though. Smile
I sat here for 20 minutes trying to figure out what we are missing. He didnt tell us what define is supposed to define when you click the button. Are we supposed to assume its that big text block in the body?
If i understood your question correctly, define is the parameter to the function. So if you do Definition("Some Text") then an alert will come pop up with Some Text in it. As benryves shows in the bottom of his post.

Ok, now that I have a good coputer let me tell you what I am trying to get the code todo

I want it so that in the text, there are certian words that are in buttons that when you press the buttons, an alert comes up with the definition of the word. At first I had it so that there were the method to do so each time, but now I see that was dumb so I made it just a general method and the word/definition will be different each time the method is called

I am pretty sure I made no sense... Sad

You could use the <dfn> element to attach definitions to words:

Code:
<p>This is a <dfn title="a group of words, usually containing a verb, which expresses a thought">sentence</dfn> with a defined word in it.</p>

If you wanted a dialog box to appear when the definition was clicked on, you could do something like this (this requires MooTools):

Code:
window.addEvent('domready', function() {
        $$('dfn').each(function(dfn) {
                dfn.addEvent('click', function() {
                        alert(dfn.get('title'));
                });
        });
});
cannot use libraries and frameworks sadly, more blocks Very Happy

Couldn't you look at each word as a string, and when that string was clicked fetch that definition from a source? It'd be hard to do I imagine, but what if you put every word in <span> or <a> tags? Or, is it possible without doing that?


There are two types of people in the world: those who can extrapolate data from incomplete data
comicIDIOT wrote:
Couldn't you look at each word as a string, and when that string was clicked fetch that definition from a source? It'd be hard to do I imagine, but what if you put every word in <span> or <a> tags? Or, is it possible without doing that?
You could do that programmatically with Javascript very easily, actually.
One way that avoids browser-specific functionality (and also does not require additional libraries) is as follows:


Code:
<script type="text/javascript">
var makeDefinitionsClickable = function() {
   var definitions = document.getElementsByTagName('dfn');
   for (var di = 0; di < definitions.length; ++di) {
      var definition = definitions[di];
      definition.onclick = function() {
         alert(definition.title);
      }
   }
}
</script>


You will also need to change your <body> element to <body onload="makeDefinitionsClickable()">.

Note that body onload is a fairly lousy event to handle - it is only fired when everything in the page has downloaded, including images (this causes notable issues on Cemetech, for example, as source blocks aren't highlighted if someone has a broken image in their signature). Handling DOM readiness (as per the MooTools example) is rather more awkward if you want to support multiple browsers, though.
Well, the problem HERE is that now I do not know what the hack the code means, I rather loose my sanity writing out 20 different buttons and alert boxes then just take code I have no idea what it does Sad

are you sure I cannot just made a method that makes an alert with a definition after pressing a button, and then just call on the method replacing the name of the button and the text on the alert?

I suppose you could:

Code:
<p>This is a <dfn onclick="alert('a group of words, usually containing a verb, which expresses a thought')">sentence</dfn> with a defined word in it.</p>

You should be able to look up things you don't understand online, though. For example, getElementsByTagName returns an array of all elements that match the specified tag name.
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?
KermMartian wrote:
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?

When the DOM is ready. How you determine this varies wildly by browser, unfortunately; in jQuery you use .ready() and MooTools you use the domready event to avoid having to write several different implementations for different browsers manually. I can understand why you wouldn't want to add a JavaScript framework to Cemetech just for that, so a crude hack may be a script tag right at the very bottom of the page that uses setTimeout() to run the prettifier a few milliseconds later (by which point one would hope the DOM had loaded).
benryves wrote:
KermMartian wrote:
benryves, a sidebar on the Prettify issue, where would you instead suggest I trigger it? With a <script> line in the footer?

When the DOM is ready. How you determine this varies wildly by browser, unfortunately; in jQuery you use .ready() and MooTools you use the domready event to avoid having to write several different implementations for different browsers manually. I can understand why you wouldn't want to add a JavaScript framework to Cemetech just for that, so a crude hack may be a script tag right at the very bottom of the page that uses setTimeout() to run the prettifier a few milliseconds later (by which point one would hope the DOM had loaded).


FYI, here is what JQuery does:


Code:
   bindReady: function() {
      if ( readyBound ) {
         return;
      }

      readyBound = true;

      // Catch cases where $(document).ready() is called after the
      // browser event has already occurred.
      if ( document.readyState === "complete" ) {
         // Handle it asynchronously to allow scripts the opportunity to delay ready
         return setTimeout( jQuery.ready, 1 );
      }

      // Mozilla, Opera and webkit nightlies currently support this event
      if ( document.addEventListener ) {
         // Use the handy event callback
         document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

         // A fallback to window.onload, that will always work
         window.addEventListener( "load", jQuery.ready, false );

      // If IE event model is used
      } else if ( document.attachEvent ) {
         // ensure firing before onload,
         // maybe late but safe also for iframes
         document.attachEvent("onreadystatechange", DOMContentLoaded);

         // A fallback to window.onload, that will always work
         window.attachEvent( "onload", jQuery.ready );

         // If IE and not a frame
         // continually check to see if the document is ready
         var toplevel = false;

         try {
            toplevel = window.frameElement == null;
         } catch(e) {}

         if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
         }
      }
   },


Only need two "hacks" - one for everyone, one for IE (just like, well, everything else).

But most browser trigger onload whenever the hell they want, not once the entire page has fully loaded.

Then again, JQuery is so awesome, you really should just include it and then *start using it* for other things as well (*cough, sax, cough*).
There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)
Ok, new problem


Code:


<script language="javascript">

function NewColor() {
   color = "#";
   for (i = 0; i < 6; i++) {
      hex = Math.round(Math.random() * 15);
      if (hex == 10) hex = "a";
      if (hex == 11) hex = "b";
      if (hex == 12) hex = "c";
      if (hex == 13) hex = "d";
      if (hex == 14) hex = "e";
      if (hex == 15) hex = "f";
      color += hex;
   }
   document.bgColor = color;
   setTimeout("NewColor();",10);
}
<form> <input type="button" value="Warning, clicking may cause seizure" onClick="NewColor()"> </form>


</SCRIPT>


this is supposed to make a button that, when clicked, causes a rather epiliptic flashing sequence, the flashing method is fine, but when I add the button, the button never appears, help?

For starters, you probably shouldn't have your <form>...</form> inside your script tags.
<- Please Support on Lego Ideas
Indeed. In addition, rather than using setTimeout() inside NewColor(), consider just doing setInterval(NewColor, 10) (don't pass a string to setTimeout/setInterval, either - just pass the function directly). setTimeout runs once; setInterval runs periodically. You don't need that form, and language="javascript" should be type="text/javascript":


Code:
<script type="text/javascript">

var NewColor = function() {  // remember, functions in JavaScript are just regular variables.
   color = "#";
   for (i = 0; i < 6; i++) {
      hex = Math.round(Math.random() * 15);
      if (hex == 10) hex = "a";
      if (hex == 11) hex = "b";
      if (hex == 12) hex = "c";
      if (hex == 13) hex = "d";
      if (hex == 14) hex = "e";
      if (hex == 15) hex = "f";
      color += hex;
   }
   document.bgColor = color;
}
</script>

<input type="button" value="Warning, clicking may cause seizure" onclick="setInterval(NewColor,10)" />
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Inlining Javascript and HTML
» Goto page 1, 2  Next
» View previous topic :: View next topic  
Page 1 of 2
» All times are UTC - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement