Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2016
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript function - onclick problems

    Why Javascript code does not execute anymore after I put it inside function - onclick event?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
     
      <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    
     
      <script type="text/javascript" src="http://cryptojs.altervista.org/api/functions_cryptography.js"></script>
     
      <script type="text/javascript">  
         
    function Enkript(){
        var Crypt = new Crypt();  // constructor  
         
        /*** encrypt */  
        var ciphertext = Crypt.AES.encrypt("plaintext");  
        // XluzvcUwZFU=3MD2vMz8PHySPJlKZiWjJg==1Gv6n6Tv8azr  
         
        /*** decrypt */  
        var plaintext  = Crypt.AES.decrypt(ciphertext);  
    
        alert(ciphertext);
        alert(plaintext);
    }
         
        </script>
      <title>enkripcija</title>
    
     
    </head><body onload="javascript:Enkript();">
    <input value="klikni" onclick="javascript:Enkript();" type="button">
    <br>
    
    <br>
    
    </body></html>
    Last edited by vinyl-junkie; Jun 12th, 2018 at 03:56 AM. Reason: added code tags

  2. #2
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    5,700
    Thanks
    26
    Thanked 584 Times in 577 Posts
    anything in the error console?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  3. #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,312
    Thanks
    3
    Thanked 564 Times in 550 Posts
    Hi there direktor,

    does this help...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>enkripcija</title>
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    #cipher, #plain {
        padding: 0.5em;
        margin: 0.5em 0;
        border: 1px solid #999;
        background-color: #fff;
        word-spacing: 1em
     }
    </style>
    
    </head>
    <body>
    
    <input id="klik"  type="button" value="klikni">
    
    <div id="cipher">cipher:</div>
    <div id="plain">plaintext:</div>
    
    <script src="http://cryptojs.altervista.org/api/functions_cryptography.js"></script>
    <script>
     ( function( d ) {
       'use strict';
       var cip = d.getElementById( 'cipher' ),
           pla = d.getElementById( 'plain' );
    	   
       d.getElementById( 'klik' ).addEventListener( 'click', 
          function() {
             while( cip.firstChild ) {
                    cip.removeChild( cip.firstChild );
                    pla.removeChild( pla.firstChild );
                }
             var crypto = new Crypt();  // constructor  
         
          /*** encrypt */  
             var ciphertext = crypto.AES.encrypt( 'plaintext' );  
          /* XluzvcUwZFU=3MD2vMz8PHySPJlKZiWjJg==1Gv6n6Tv8azr */ 
         
          /*** decrypt */  
             var plaintext  = crypto.AES.decrypt( ciphertext );  
    
             //alert( ciphertext );
             //alert( plaintext );
    		 
             cip.appendChild( d.createTextNode( 'cipher: ' + ciphertext ) );
             pla.appendChild( d.createTextNode( 'plaintext: ' +plaintext ) );
             }, false );
    
     }( document ));
    </script>
    
    </body>
    </html>

    coothead
    Last edited by coothead; Jun 12th, 2018 at 04:12 PM.
    ~ the original bald headed old fart ~

  4. #4
    Senior Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    1,109
    Thanks
    204
    Thanked 137 Times in 137 Posts
    Hi

    Going back to your original code, I think the reason it doesn't work is simply because of variable naming

    var Crypt

    change all Crypt ( but NOT new Crypt(); )

    to

    Cryptog (or whatever)

    for example and your code should work.


    Of course if you can understand coothead's code, go with that.


    LT
    Last edited by low tech; Jun 12th, 2018 at 01:47 PM.
    0000

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,086
    Thanks
    4
    Thanked 447 Times in 436 Posts
    Yeah, I'd say the naming conflict is definitely contributing to your woes...

    The use of the outmoded onevent attribute like it's still 2003 not helping either... really a LOT of that code is years out of date with things like the type attribute on the <script> tag, the outdated doctype, character encoding that really has no business being used on websites anymore, scripting inside <head>... and in production code of course since NONE of the content works without JavaScript, it should be built BY the JavaScript and not even exist in the markup.

    ... but for testing purposes it's fine.

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <title>enkripcija</title>
    </head><body>
    <button type="button" id="klikni">klikni</button>
    
    <script src="http://cryptojs.altervista.org/api/functions_cryptography.js"></script>
    
    <script>
    
    function enkript(){
    	var
    		crypt = new Crypt(),
    		ciphertext = crypt.AES.encrypt("plaintext"),
    		plaintext  = crypt.AES.decrypt(ciphertext);
    	alert(ciphertext);
    	alert(plaintext);
    }
    
    document.getElementById('klikni').addEventListener('click', enkript, false);
    
    </script>
    
    </body></html>
    Cleans up the 'basics', appears to work. Leveraged the fact that JavaScript is case sensitive -- a good naming practice is that CapsOfTheFirstLetter is for classes / objects you'll be performing 'new' upon, lowerCaseFirst is for variables/object instances and normal functions you do not treat as objects, and ALL_CAPS should be for 'constants'. Lets you avoid these types of headaches.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •