We Keep Coding

Select button elements based on appearing text in the browser

(EDIT:
I forgot to ask to not use jQuery)
I'm trying to select html buttons based on their displayed text, not their class or id.
All the button have the same dom structure and classes. Like follow and unfollow buttons in the folowing example:
<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
<span class="button-text following-text">
Following
</span>
<span class="button-text unfollow-text">
Unfollow
</span>
</button>
The closest solution I found is based on the dom structure like getElementsByClassName, getElementById and :contains(), but I can't figure it out.
EDIT2:
The solution in jQuery would be $('span:hidden:contains(Follow)').parent();
but I'm searching for a solution without jquery.

Try with the below code, you can style accordingly
$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );

you can give id's to spans as follows:
<span id="follow" class="button-text following-text">
Following
</span>
<span id="unfollow" class="button-text unfollow-text">
Unfollow
</span>
and then by using the below code in javascript, you can check their status
if(document.getElementById("follow").innerHTML=="Following"){
//follow
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow
}

I found a way to do it with :hidden but this is jQuery and thus not useful in my case.
$('span:hidden:contains(Follow)').parent();
The best thing I found now is to get all buttons first and then use a condition (takes 2 steps, but working).
var buttons=document.getElementsByClassName('...');
//loop...
if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
//buttons[i]
}
If you find a better solution it's still welcome :-)

change visibility of span using jquery

I work on a durandal project.
I have span and button elements in html.
The span elements are hidden and I want to show these on button click.
My problem is that when I hide the span from html- it can't show it from javascript.
I saw this question (on link change visibility of label tag using jquery) and I tried all of the answers- nothing helped me.
(I tried using:
in html:
<span id="mySpan" hidden = "hidden">aaa</span>
or:
<span id="mySpan" style= "visibility:collapse">aaa</span>
or:
<span id="mySpan" style= "display:none">aaa</span>
in javascript:
$("#mySpan").show();
or:
$("#mySpan").css('visibility', 'visible');
I tried all of the optional combinations
)
Note: I want you to know that when I'm not hiding the span from the HTML, and try using toggle(), hide(), show() - it works well.
Example that does not work:
on html page:
<span id="mySpan" hidden = "hidden">aaa</span>
on javascript page:
$("#mySpan").show();

Your HTML is not OK!
Remember, spans are closed <span></span> this way, and not the way you are closing them! That way, only self-closing elements such as: input, img etc are closed!
Try to write this:
<span id="mySpan">Some text!</span>
The CSS would be:
#mySpan {
display: none; // you're using diaplay!
}
Now using jQuery either use this:
$('#mySpan').show()
Or this:
$('#mySpan').css('display', 'block');

Well, your code is all wrong.
The id attribute should only be used once per page. It is meant to be unique so that you can refer to it as a single point in the document. You should change it to class="mySpan" and then select them using $(".mySpan").
visible:collapse is invalid CSS. You probably meant to use visibility, yes?
diaplay:none is also invalid CSS. Probably a typo of display, yes?
There is a hidden attribute in the newest HTML spec (usually called HTML5). I am not sure if you are aware of it; if you are, and you are trying to use it, then you should put the following in your CSS file so that it works in browsers that have not yet implemented it:
*[hidden] {
display: none;
}
Follow-up:
Okay, you want to be able to toggle a span on and off by clicking on a button. This will do it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="myButton">Show/hide the span</button><br>
<span id="mySpan" style="display:none">This is a span with some text in it</span>
<script>
$(function() {
$("#myButton").click(function() {
$("#mySpan").toggle();
});
});
</script>

Seems to be an error in "diaplay"? Try to change:
<span id="mySpan" style="diaplay:none"/>
to:
<span id="mySpan" style="display:none"/>

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?

This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>

You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Controlling the preventDefault to select which default to prevent

In a page I'm working on I have this HTML (simplified version; the original is a bit more complex).
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ></span>
<span class="type">numeric</span>
</a>
Then I have a system that allows an "edit mode".
That edit to mode changes that HTML to this:
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
<span class="type">numeric</span>
</a>
The issue is as follows:
When the user clicks the input how can I have the carret where the user clicked without anything else happening?
For that I tried this:
If I use the preventDefault(), the user is not sent to the link but the carret is also not positioned where the user clicked.
If I use stopPropagation(), nothing is prevented, the link is clicked.
If I use both, same as preventDefault() happens.
One possible solution I thought is to get rid of the <a> and replace it with a different tag, like a <span> tag. I just would prefer not to have to do that due to how this system works. If you think that there's a nice alternative, then please state it.
No examples or answers with libraries please
Edit: My relevant js code, as requested:
this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
e.preventDefault();
e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;
Edit2: jsfiddle as requested.
http://jsfiddle.net/brunoais/gZU8C/
Now try to place the caret where you clicked. You'll check that the input becomes selected, the link is not followed but the caret is not placed where you clicked.

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure

Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.

I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>

Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.

Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/