Displaying text with response option?

JavaScript
1

Hi all, another one from me.

Im trying to create a function where text is displayed on the page and 3 buttons appear with different options with which to respond. I would also like them to be able to launch other events on click which will change the content of the text and responses and i would like to be able to hide them again at the end. This is my css:

button.option1 {
    background-color: rgb(9,109,204);
    width: 300px;
    height: 100px;
    border-radius: 15px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 32px;
    z-index: 1;
    padding: 5px;
    float: left;
}
button.option2 {
    background-color: rgb(9,109,204);
    width: 300px;
    height: 100px;
    border-radius: 15px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 32px;
    z-index: 1;
    padding: 5px;
    float: right;
}
button.option3 {
    background-color: rgb(9,109,204);
    width: 300px;
    height: 100px;
    border-radius: 15px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 32px;
    z-index: 1;
    padding: 5px;
    float: center;
}

my html

<div id="message" style=" text-align:center;font-size:45px;color:ivory;"></div>

<button class="option1" type="button" onclick="alert('you chose to follow it')"></button>
<button class="option2" type="button"onclick="alert('you chose to choose later')"></button>
<button class="option3" type="button"onclick="alert('you chose to return to safety')"></button>

<button type="button" onclick="LaunchTask()">EXPLORE</button>

and my javascript

function LaunchTask() {
        var msg = "There is a tunnel. follow it?";
        var chooseL = "follow it";
        var chooseC = "choose later";
        var chooseR = "return to safety";
        el = document.getElementById('message'),
                msg;
        el1 = document.getElementById('button.option1'),
                chooseL;
        el2 = document.getElementById('button.option3'),
                chooseC;
        el3 = document.getElementById('button.option3'),
                chooseR;

       el.innerHTML = msg;
       el1.innerHTML = chooseL;
       el2.innerHTML = chooseC;
       el3.innerHTML = chooseR;
}

I haven’t tried to set up launching different events or hiding everything at the end, im quite out of my depth with this one. All help is greatly appreciated! :slight_smile:

2

Off topic:

@aaron51connelly: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited the above post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

1 Like
3

Welcome to the wonderful world of…javascript. Lost my alliteration there. Anyway!

So. Let’s start at the beginning. Laying out a plan of action!

Step 1.

Step 2.

Step 3.

Let’s start by focussing on Step 1, because that is a reasonable and sensible place to start. At the beginning. You click the Explore button, and you want to show messages in the other buttons.
The good news is, your event fires. The message shows up.
What DOESNT show up are the labels on the buttons. Ah. Well what’s going on there?
Well, if you open up the developer console (usually by pushing F12, though if that doesnt work, google your favorite browser of choice with “developer console” and you should find the shortcut.), you’ll see something like this: (I’m using Chrome.)

image
image610Ă—205 5.52 KB

The console is telling me what went wrong. In this case, it thinks something went wrong on line 16, which is el1.innerHTML = chooseL; in my version of your code.
So the code thinks that el1 is null. Well, there’s the problem then, right? Let’s take a look at why.

        el1 = document.getElementById('button.option1'),
                chooseL;

So we’re looking for an element with the id attribute set to “button.option1”. I’m not sure what you’re trying to do with the comma and the chooseL on the end of this statement, for the record.

<button class="option1" type="button" onclick="alert('you chose to follow it')"></button>

Well this… doesnt have an id attribute at all. So it can’t match this. It should be noted that getElementById is doing a literal search, it’s not a selector search.
Solution? There’s a couple of possibilities.
#1 Add an id attribute.
#2 Change what your code is looking for. We CAN look for selectors, by using querySelector instead.

(Side note: Your code for el2 is looking for option3 by mistake.)

4

ah… i guess you can already tell ive never done this before :') Thanks for your help though, very easy to understand when you break it down :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.