3

Need to edit this post because I didn't word my question properly and asked the wrong thing

I'm designing a website, and I'm wondering if it's possible to have a block of text that displays different things based on a condition variable.

e.g. if users have different values for a variable through some previous action on a website -- and both users click the same "next" button to go to the next page. Based on that previous action, hypothetical user A will see different text than hypothetical user B, but they'll both be on the same page.

It will be the same HTML file for the page, but the content will be different depending on previous data. Is this possible?

Would I need to use js for this, or is it something simple that can be done with just HTML?

Any help would be appreciated, thanks!

user83676
  • 339
  • 1
  • 9
  • 15
  • why do you need to refresh the page, when you can simple show/hide the contents or even better loading dynamic contents. –  Jan 25 '16 at 04:57

3 Answers3

1

NEW Answer Here

http://codepen.io/mariocatch/pen/OMQGap?role=manager http://codepen.io/mariocatch/pen/OMQGap?role=employee

Quick codepen that takes query parameter from the URL. If the query parameter contains a role, then it gets the value and shows a particular UI for that role.

OLD Answer Here

Here is an example that shows some HTML, and adjusts the content of a div element based on which button is clicked.

Html:

<div id="content">
  Who are you?
</div>
<hr>
<button type="button" id="btn-foo">
  I am Foo
</button>

<button type="button" id="btn-bar">
  I am Bar
</button>

JavaScript

var fooBtn = document.getElementById('btn-foo');
fooBtn.addEventListener('click', function() {
    var content = document.getElementById('content');
  content.innerHTML = 'Hello, I am Foo.';
});

var barBtn = document.getElementById('btn-bar');
barBtn.addEventListener('click', function() {
    var content = document.getElementById('content');
  content.innerHTML = 'Hello, I am Bar.';
});

JSFiddle

mariocatch
  • 8,305
  • 8
  • 50
  • 71
  • Hi, thanks for the answer! However I realized I mis-worded my question and kind of asked something I'm not actually looking to do: would you be able to read over my edited post and let me know if there is still a solution? Thanks! – user83676 Jan 25 '16 at 05:00
  • 1
    @user83676 Answer updated with codepen link to a possible solution. – mariocatch Jan 25 '16 at 05:21
  • perfect!! Thank you! – user83676 Jan 25 '16 at 05:24
0

You can add a click handler on that option like 0 and 1. And in that handler you can modify the text of the block based upon value is 0 or 1. you can access that element by document.getElementById('blockId').text = 'Any text';

If you want to get text from server side and then update the block then you can make ajax call or rest call etc and on success of that call modify the text of that block.

Nitin Garg
  • 888
  • 6
  • 7
  • Thanks! Would it be similar if the options carried over from a previous page, and therefore I already have the variable (e.g. they wouldn't actually be clicking options, both user 1 and user 0 will click the same "next" button to go to the next page). – user83676 Jan 25 '16 at 04:52
  • Yes, In that case instead of click handler it will be on the page load i.e. at the beginning of js, you can get url parameter and check the value of that parameter and put in the condition according to the value like if paramValue == 0 then modifyBlock='' else modifiyBlock='something else'. – Nitin Garg Jan 25 '16 at 05:39
0

Your best bet would be to use URL parameters. There's a brief guide to using jQuery to retrieve them here and a similar question answered here.

Community
  • 1
  • 1
illogicaljake
  • 25
  • 6
  • Thank you! I think that's what I'm planning on doing. After getting the parameters, how would I implement a conditional in HTML/js/etc.? – user83676 Jan 25 '16 at 05:15
  • [Here's](https://css-tricks.com/snippets/javascript/get-url-variables/) a short-and-simple method using jQuery. Hopefully that should help clear it up. Also, a similar StackOverflow question [here](http://stackoverflow.com/questions/19491336/get-url-parameter-jquery). :) – illogicaljake Jan 25 '16 at 22:00