• 0

Using onclick="alert('message')" With a Text File

Asked by Gerowen,

 Share

Question

Grand Master

Gerowen

Posted
Posted

I am using onclick="alert('message')" to pop up a disclaimer on our website for links that go to websites external organization. The disclaimer however is rather long. Is there a way to get it to pull the message from a plain text file instead of me having to paste the disclaimer into the HTML of every single link?

2 answers to this question

Recommended Posts

  • 0
Rising Star

kyosuken

Posted
Posted

Solution number one : Vanilla JS FTW

<!-- // Make sure in your CSS that #message { display:none;} // -->
<div id="message">
Your message !
</div>

<!-- // in your onclick tag : // -->

<a href="somethinghere" onclick="alert(document.getElementById('message').innerHTML);">Click a me !!</a>

So what does it do ? basically stores the lenghty message in a "hidden" div. And then you just have to get the content on the fly when you build your alert !

Note that the code should work, unless i made a typo :) !

Solution number two : jQueryesque solution ~

The Html :

<!-- // We keep the very same method as above cause it's the cleanest IMO and make sure in your CSS that #message { display:none;} // -->
<div id="message">
Your message !
</div>

<!-- // Your links, don't add any inline JS to them ! (that's bad) instead we are going to use some jQuery hooking // -->

<a href="gosomewhere" class="hasmessage">My beautiful link !</a>

The JS :

- Make sure you have jquery added to your <head></head> and the following script by the end of your webpage

&lt;script&gt;
// Make sure the script is in an auto execute routine also to preserve compat with jQuery, and to prevent glob vars collision if any ~
(function($){

// Retrieve the message text from the div
var message = $('#message').html(); 

// we will "hook" on our links that should have the message
// Note that i added the class "hasmessage" so that only the links you want to have the alert will display it
$('.hasmessage').click(function () {

    alert(message);

});

})(jQuery);
&lt;/script&gt;

Methode 2 is the cleanest, cause you do not have a bunch of inline JS everywhere in your code, but it's also the less efficient if you only use jQuery for that (you would load 40KB worth of minified/gzipped JS just for 4 lines of code... well)

But you have the choice now ! :)

  • 0
Grand Master

Gerowen

Posted
  • Author
Posted
  On 28/04/2011 at 08:20, kyosuken said:

Solution number one : Vanilla JS FTW

&lt;!-- // Make sure in your CSS that #message { display:none;} // --&gt;
&lt;div id="message"&gt;
Your message !
&lt;/div&gt;

&lt;!-- // in your onclick tag : // --&gt;

&lt;a href="somethinghere" onclick="alert(document.getElementById('message').innerHTML);"&gt;Click a me !!&lt;/a&gt;

So what does it do ? basically stores the lenghty message in a "hidden" div. And then you just have to get the content on the fly when you build your alert !

Note that the code should work, unless i made a typo :) !

Solution number two : jQueryesque solution ~

The Html :

&lt;!-- // We keep the very same method as above cause it's the cleanest IMO and make sure in your CSS that #message { display:none;} // --&gt;
&lt;div id="message"&gt;
Your message !
&lt;/div&gt;

&lt;!-- // Your links, don't add any inline JS to them ! (that's bad) instead we are going to use some jQuery hooking // --&gt;

&lt;a href="gosomewhere" class="hasmessage"&gt;My beautiful link !&lt;/a&gt;

The JS :

- Make sure you have jquery added to your <head></head> and the following script by the end of your webpage

&lt;script&gt;
// Make sure the script is in an auto execute routine also to preserve compat with jQuery, and to prevent glob vars collision if any ~
(function($){

// Retrieve the message text from the div
var message = $('#message').html(); 

// we will "hook" on our links that should have the message
// Note that i added the class "hasmessage" so that only the links you want to have the alert will display it
$('.hasmessage').click(function () {

    alert(message);

});

})(jQuery);
&lt;/script&gt;

Methode 2 is the cleanest, cause you do not have a bunch of inline JS everywhere in your code, but it's also the less efficient if you only use jQuery for that (you would load 40KB worth of minified/gzipped JS just for 4 lines of code... well)

But you have the choice now ! :)

Thank you very much!

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Trump announces a gold smartphone for $499 and new "T1 Mobile" 5G wireless service

      By fintechfooty · Posted

      this man really knows how to embarass americans! i thought he was platforming on "bringing back respect to america!". really sad to see the grip he has over working class americans. he could (and i might argue already has) spit on the working class and half would kiss his shoe. at least this you gotta give him credit for. who else can do this with applause and cheer.
    • Get this 27-inch ASUS VA279QG 120Hz monitor for dirt-cheap

      By TarasBuria · Posted

      Get this 27-inch ASUS VA279QG 120Hz monitor for dirt-cheap by Taras Buria If you are on a very tight budget but you still want to upgrade your monitor to something more exciting than a standard 60Hz office monitor, ASUS has a perfect deal for you. The VA279QG is currently available for as little as $109, and for this money, you get quite a lot of a monitor. The ASUS VA279QG is a big 27-inch IPS monitor with a classic FullHD resolution and a wide 178-degree viewing angle. It can operate with a refresh rate of 120Hz, which is more than enough for buttery-smooth gaming. And since the monitor is FullHD, you will be able to see high refresh rates in more games since your GPU will have to render fewer pixels at 120Hz. Besides, the monitor supports variable refresh rate (VRR), a feature that can further reduce stutters by dynamically adjusting the refresh rate to your FPS. Other display specs include a 1ms MPRT response time, 16.7 million colors, 99% sRGB coverage, and a typical brightness of 300 nits. It is also covered with an anti-glare coating to reduce reflections. Ports-wise, you get one DisplayPort 1.2, one HDMI 1.4, one VGA, and one headphone jack. There are also two 2W speakers, but set your expectation right—these are unlikely to blow your mind with high-quality audio. Finally, there is a VESA 100 mount and a cutout in the base, which lets you mount your phone, namecard, or other small items for extra convenience. 27-inch ASUS VA279QG 120Hz IPS Gaming Monitor - $109 | 22% off on Amazon US This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • It's been four years, and I still don't have a strong enough reason to upgrade to Windows 11

      By xMorpheousx416 · Posted

      lol See... one is only 100% when it's by itself. I live for exceptions to the rule... our talk point was in reference in comparing Vista (not SP1/2) release vs. 7. Any OS will run stable once enough work has been put into it... hell, even Windows 95 had six versions before she was finally complete(d)... just about, what, six or seven months before 98 became available?
    • 3uTools 3.26.007

      By Copernic · Posted

      3uTools 3.26.007 by Razvan Serea 3uTools is a powerful iOS management tool that allows users to efficiently handle their iPhone or iPad without relying on iTunes. It offers seamless data transfer, one-click backup and restore, firmware updates, and a built-in file explorer for easy access to system files. Users can also manage apps, contacts, and media, including photos, videos, and ringtones, all within a simple and intuitive interface. For optimization and maintenance, 3uTools provides battery health monitoring, real-time device information, and system cleanup tools. It also includes features like screen recording, video conversion, and iCloud backup management, making it an essential tool for iOS users looking for greater control over their devices. Key features of 3uTools: iOS device management App installation and removal Firmware downloads and updates Backup and restore functions Data transfer between iOS and PC Ringtone creation Custom wallpaper management Device flashing File system explorer Battery health monitoring Screen capture and recording Video and photo management iCloud backup support Flashing and restoring iOS without data loss 3uTools 3.26.007 changelog: Easy Flash supports iOS 26.0 flashing. Optimized Virtual Location. Fixed some known bugs. Download: 3uTools 3.26.007 | 186.0 MB (Freeware) Download: 3uTools 32-bit | 192.0 MB View: 3uTools Home Page | macOS | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • 'Open source Windows' ReactOS shows off one of the most iconic Windows games in full screen

      By Borken_ · Posted

      The development time of this Operating System will have competition with the development time of Star Citizen 😂

  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      652
    2. 2
      ATLien_0
      269
    3. 3
      +FloatingFatMan
      176
    4. 4
      Michael Scrip
      155
    5. 5
      Steven P.
      136
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!