How to craft a more elegant implementation

Admin 1
Viewed 58

I've made an interface for my students where they click an image and hear the description pronounced via text-to-speech, and the text description appears in a div.

Currently I'm calling the text from the image because the onclick event for the speech only works if it's on the div, and since it's a (this) event I don't understand how to combine the two.

First, is it possible, or "better" - to have a single click on the div trigger both functions, rather than splitting them between the div and the image as I've done? This is the only way I could figure out how to get it all working. So that's the first thing.

Second, I'm re-stating this code every time

jQuery(this).articulate('speak')" data-articulate-append=

How can I make this more economical? In reality I have hundreds of items, and there are a bunch more settings in between the jQuery and data-articulate. I've shortened it for this post but in reality it's much longer and repeated hundreds of times.

Last, is it possible to draw the content for the innerHTML from the data-articulate-append part of the TTS command, since it's the same in every case?

Many thanks, I've spent quite a while constructing what I have so far as I'm new to JS. I'm learning and I've tried to answer these questions myself but it's not yet within my skillset, and sorry if I'm not using all correct terminology in my post. I'm including a stripped-down version of the page here, with just the essentials. Any input is greatly appreciated.

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
        <script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
        <link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()"  src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()"  src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
        </div>
        <div id="word">
        </div>
        <script>
            function elephant() {
                document.getElementById("word").innerHTML ="elephant";
        }
            function camel() {
                document.getElementById("word").innerHTML ="camel";
        }
            function bear() {
                document.getElementById("word").innerHTML ="bear";
        }
        </script>
    </body>
</html>
html jquery javascript
1 Answers

You can accomplish this by:

Giving each div a class, for my example its speak. Then add an eventlistener for speak elements. Then in that event listener, you can run multiple functions. You can also get rid of the image's onclick handler.

<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>  
      

$(document).ready(function(){
    $(".speak").on("click",function(){
        $(this).articulate('speak');
        $("#word").html($(this).data("articulate-append"));
    });
});
user_36842650
Related