We Keep Coding

Using a single button to show and hide text [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I don't know if this will be a duplicate, but I've tried multiple scripts (not just in jQuery, but also in Javascript) to try to get the job done. Here's the HTML:
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
And jQuery:
$('#togglebutton').click(function() {
$('text').toggle('slow');
});
Click me to try the Fiddle
I hope you may be able to find a solution. Thanks :D

use #test instead of test to select an id attribute in jquery
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>

Because you're selecting an ID, $('text') should be $('#text')
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>

You're missing the # sign for the text attribute.
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});

Div tag content not showing on click [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>

After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>

document.getElementById and using id name [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have the following in HTML code:
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
To retrieve the contents of page-title, I've tried to use, among others, the following:
document.getElementById("page-title")[0].InnerText
document.getElementsByTagName("h1")[0].getElementById("page-title")[0].InnerText
Each time I get an error.

[0] is used when you are grabbing multiple elements & you want to choose the first element from the list.
Eg: If your page has multiple <p> and you do a getElementByTagName('p') then you need to use [0] to access first element in the list of all captured elements.
<p>Hello</p><p>hi</p>
then
alert(document.getElementsByTagName("P")[0].innerHTML); ## this alerts "Hello"
Answer to your question:
alert(document.getElementById('page-title').innerHTML);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>

Use document.getElementById(); like this instead. You also should use .textContent to find the text of the element.
The reason you do not have to use [0] when finding elements by id is because getElementById returns one element because there should only be one element in your HTML with a named id.
alert(document.getElementById("page-title").textContent);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>

document.getElementById("page-title").innerText
you're only grabbing one element, so no need for the [0]

Hiding a div with checkbox [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I've tried working with this but I think it is a problem with the jquery, my cloud9 thing says that '$ is not defined'
Here is my code: https://jsfiddle.net/qLuvsy9y/6/
Another example: http://jsfiddle.net/5udtC/6913/
<div class="wanted"> <!-- Toggle Lowercase -->
<label class="input-toggle">
<input type="checkbox" id="isAgeSelected" checked>
<span></span>
</label>
</div>
<p> Upper Lower Case Mix</p>
<div class="hide">
<div id="txtAge" style="display:none">
<div class="wanted"> <!-- Toggle Uppercase -->
<label class="input-toggle">
<input type="checkbox" id="uppercase" checked>
<span id="randomString"></span>
</label>
<p id="test1">Uppercase</p>
</div>
Jquery
$('#isAgeSelected').change(function() {
$("#hide").toggle(this.checked);
});

if you cloud9 "thing" is saying $ is not defined then you are either not including the jquery library in your document or not wrapping your code in a document ready statement and the browser is trying to execute code too early.
you need to include the jquery library: either from a local file - such as:
<script src="js/jquery-2.1.1.js"></script>
or from a CDN - such as:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and then you need to wrap the jquery in a document ready statement to ensure that the library has loaded before tying to execute jquery commands:
$(document).ready(function(){
$('#isAgeSelected').change(function() {
$("#hide").toggle(this.checked);
});
});
and then you have a div with a class of "hide", but you are attempting to modify an element with an ID of "hide" in your code. These need to be the same:
$("#hide").toggle(this.checked);
should be
$(".hide").toggle(this.checked);
or change the div to be:
<div id="hide">

insert text into span class using jquery [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have following html structure
<a id="myBtn" class="ui-link">
<span class="number"> </span>
<span class="button "> </span>
</a>
I want dynamically to insert some content into <span class="number">
var content = 99;
$('number').html(content);
but nothing change.
So what I need to do insert value into span that resulted node looks like this
<span class="number">99</span>

You are not using . to get class selector. Use $('.number') instead of $('number')
$('.number').html(content);
OR
$('.number').text(content);

insert text using class
var content = 99;
$('.number').html(content);

Try this:
$('.number').html(content);
You are referring to a wrong element. You can also do this:
$('.number').text(content);