Accessing object functions by click

Question

I`m working on an interactive story using Jquery. My question is; I want to change the text everytime I click in a button to the next dialogue function, so I created an object with some functions that contains the dialogues. Since it's an object, not an array, how can I access it's elements by click count?

story ={ 
    dialogue: function(){
     $("p").text("My name is Richard");  
    },
     dialogue: function(){
     $('p').text("Nice to meet you!").hide().fadeIn(1000); 
    },
     dialogue: function(){
     $('p').text("what is your name").hide().fadeIn(1000); 
    }
};


var clickCount = 0;

var nextStatment = function() {
  $('p').text(story[clickCount]).hide().fadeIn(1000);
  clickCount++;

};

$('.slideBt1').on('click', nextStatment);

Arun P Johny · Accepted Answer · 2015-08-14 11:17:49Z

4

You can use an array to store the text and use that with indexes to set the next content

story = ["My name is Richard", "Nice to meet you!", "what is your name"];

var clickCount = 0;
var nextStatment = function() {
  $('p').hide().text(story[clickCount] || '').fadeIn(1000);
  clickCount++;

};

$('.slideBt1').on('click', nextStatment);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Click to start</p>
<button class="slideBt1">Next</button>

answered Aug 14, 2015 at 11:17

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2021-10-07 06:09:01Z

2

Following the next specification (https://www.rfc-editor.org/rfc/rfc7159#section-4) you can find that

The names within an object SHOULD be unique. ... An object whose names are all unique is interoperable in the sense that all software implementations receiving that object will agree on the name-value mappings.

You should re-write your object, using unique keys or array.

edited Oct 7, 2021 at 6:09

CommunityBot

11 silver badge

answered Aug 14, 2015 at 11:23

Daria

2761 gold badge3 silver badges13 bronze badges

Comments

Keiran van Vuuren · Accepted Answer · 2015-08-14 11:17:52Z

1

Maybe try making story an Array of functions?

story = [ 
    function(){
     $("p").text("My name is Richard");  
    },
     function(){
     $('p').text("Nice to meet you!").hide().fadeIn(1000); 
    },
     function(){
     $('p').text("what is your name").hide().fadeIn(1000); 
    }
];


var clickCount = 0;

var nextStatment = function() {
  $('p').text(story[clickCount]).hide().fadeIn(1000);
  clickCount++;

};

$('.slideBt1').on('click', nextStatment);

answered Aug 14, 2015 at 11:17

Keiran van Vuuren

625 bronze badges

Collectives™ on Stack Overflow

Accessing object functions by click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related