CODEWITHSUNDEEP
javascriptjqueryhtmlcssbutton
TCannadySF
TCannadySF

Reputation: 286

Change DIV text when a button is clicked using JS/JQ

Caveat: second time poster, rookie developer. I just finished CodeSchool's "Try JQuery," so now I'm trying to build a little quiz using a mixture of HTML/CSS/JS/JQ. Please excuse any snafus or strayings-from-norms. I hope to bee there soon!

I'm trying to change the text within the class div.questions when the button is clicked, but nothing's happening. Until now I've only done this on CodeSchool, so this is my first time trying to build it on my own. For all I know, my code is correct but something as fundamental as "script src" is incorrect. I'm currently using the .text(new text) method, and perhaps I should be using something like .html(new text)?

Edit: clarification - my issue isn't that this isn't working in JSFiddle. The comments below show why that is, so thanks for that. However, my real issue is that this isn't working while loading the document locally into my browser. I'm using Sublime Edit. Thanks.

JSFiddle: http://jsfiddle.net/Ever/jvNf8/

HTML:

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jquery.min.js"></script>
    <title>Tim's JS Quizlet!</title>
</head>
<body>
    <h2>JS and JQuery Quiz</h2>

    <div class="intro">
    Welcome! When the button at the bottom is clicked, the question in the box below 
will change to the next question, and the answer choices below will change to the 
respective choices.
    <br>
    </div>

    <br>

    <div class="questions">Ready?</div>

    <br>

    <input type="radio" id="radio1" name="radios"> Yes</br>
    <input type="radio" id="radio2" name="radios"> No</br>
    <input type="radio" id="radio3" name="radios"> Wat</br>

    </br>

    <button>Submit</button>
</body>

CSS:

div.intro{
font-weight: bold;
width: 50%;
}

div.questions{
width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;
}

JS:

$(document).ready(function(){ 
$('button').on('click', function(){
    $('.questions').text("What's your favorite color?");
    });
});

Upvotes: 1

Views: 3330

Answers (5)

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

put the code in your "head" tag:

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script>
    $(document).ready(function(){ 
       $('button').click(function(){
         $('.questions').html("What's your favorite color?");
       });
    });
 </script>

You need to provide the reference of jquery lib, before using jquery functions.

Upvotes: 0

reuelab
reuelab

Reputation: 1986

Include jQuery library and change your script to this:

$(document).ready(function(){ 
    $('button').click(function(){
        $('.questions').html("What's your favorite color?");
    });
});

FIDDLE

Upvotes: 1

assembly_wizard
assembly_wizard

Reputation: 2064

It works just fine.

The problem is you're using JSFiddle and you haven't included jQuery. You can do that in the Frameworks & Extensions pan on the left.

Upvotes: 0

Rusty
Rusty

Reputation: 384

Use 

button:action
{
//<how you want it changed here>//
}

in your css.

Upvotes: 0

Felix
Felix

Reputation: 38102

You need to include jQuery from the Frameworks and Extensions tab of jsFiddle and it'll work.

Updated Fiddle

Upvotes: 2

Related Questions