Display text in div when javascript onclick

Question

I've multiple buttons with related text to each button, when user click on the button, the text should change according to button and text should be displayed in the DIV.

I'm using if elseif to choose between the text for each button, now I'm unable to go through the function to pass the text to the div onclick().

<html>  
   <head>  
      function display (selected) {  
         if (decision == firstbox)  {  
            display = "the text related to first box should be displayed";  
         }  else if (decision == secondbox)  {  
            display = "Text related to 2nd box.";  
         }  else  {  
            display ="blank";  
         } 
   </head>  
   <body>  
      <input type="button" id="firstbox" value= "firstbox" onclick="display(firstbox)" /><br>    
      <input type="button" id="secondbox" value= "secondbox" onclick="display(firstbox)" /><br>
   </body>
</html>

Francisco Presencia · Accepted Answer · 2013-05-27 01:51:08Z

2

Pure javascript from your code:

function display (selected)
  {
  if (selected == 'firstbox')
    {
    texttoshow = "the text related to first box should be displayed";
    }
  else if (selected == 'secondbox')
    {
    texttoshow = "Text related to 2nd box.";
    }
  document.getElementById("thetext").innerHTML = texttoshow;
  }

And the html:

<body>
  <div id = "thetext"></div>
  <button onclick = "display(firstbox)">Firstbox</button>
  <button onclick = "display(secondbox)">Secondbox</button>
</body>

For what is worth it, in jQuery (a javascript framework):

$("#buttonclicked").
  click(function(){
    $("#yourdiv").
      html("Your text");
    });

edited May 27, 2013 at 1:51

answered May 27, 2013 at 1:33

Francisco Presencia

8,8757 gold badges50 silver badges96 bronze badges

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

Comments

Leandro Villagran · Accepted Answer · 2013-05-27 01:39:02Z

0

This should do what you want

<button type="button" id="button-test">Text that will apear on div</button>
<div id="content">
</div>
    <script type="text/javascript">
     $(document).ready(function(){
     $('#button-test').click(function(){
$('#content').text($(this).text());
    });
     });
    </script>

http://remysharp.com/2007/04/12/jquerys-this-demystified/

http://api.jquery.com/text/

answered May 27, 2013 at 1:39

Leandro Villagran

3001 silver badge8 bronze badges

Comments

S. Mayol · Accepted Answer · 2017-07-14 20:12:25Z

Here I am going to provide you to examples in one. One of them use div and the other don't, one using a link and the other using a button that need to be clicked.

<!DOCTYPE html>
<html>
<body>

<h2>Displaying text when clicked</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = 'These are the steps to get your PIN number: Bla bla bla'">
PIN button:</button>

<p id="demo"></p>


</br></br></br>

<a onclick="showText('text1')" href="javascript:void(0);">PIN link:</a>

<script language="JavaScript">
   function showText(id)
    {
        document.getElementById(id).style.display = "block";
    }
</script>

<div id="text1" style="display:none;">These are the steps to get your PIN number: Bla bla bla</div>

</body>
</html>

Collectives™ on Stack Overflow

Display text in div when javascript onclick

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