I use javascript (jQuery) to toggle text of html-element (span):
function TextToogle(element, text) {
if (element.html() == '-' + text) {
element.html(text.replace(element.html(), '+' + text));
}
else {
element.html(text.replace(element.html(), '-' + text));
}
}
I give two arguments for my function:
1) element - html Object
2) text - default text of span
My goal is toggle the span text from "+text" to "-text" and vice versa.
But script doesn't work correctly. When function toggle text to "+text", as result I see "text". The toggle to "-text" works correctly.
I would just replace inside a callback, seems so much simpler
element.text(function(_, txt) {
return txt.replace(/[+-]/g, function(x) {
return x == '+' ? '-' : '+';
});
});
FIDDLE
Based on you is comparison (element.html() == '-' + text) your function can be simpler. You don't need text.replace(element.html(), '+' + text) part:
function TextToogle(element, text) {
if (element.text() == '-' + text) {
element.text('+' + text);
}
else {
element.text('-' + text);
}
}
However relying on text comparison is not ideal. I would use CSS which is not text dependent:
$('.text-toggle').click(function() {
$(this).toggleClass('active');
});
CSS
.text-toggle:before {
content: '+';
}
.text-toggle.active:before {
content: '-';
}
There is obvious advantage here is that you can style your +/- easily, you can set a background image, chage font-size, etc. While you would'n be able this with your original approach.
Demo: http://jsfiddle.net/dfsq/mvj5c/
function toggleText(text) {
return {'-':'+', '+':'-'}[text[0]]+text.slice(1);
}
element.html(toggleText(element.html()));
See simple example.
You've text -abc. Now it's fail on both of the checks.
Why not do this
function TextToogle(element, text) {
var check = text.splice(0, 1);
if (check === "-") {
element.html("+" + text.substring(1, text.length));
}
else {
element.html("-" + text.substring(1, text.length));
}
}
try this code
$('span').click(function(){
var
$this = $(this),
thisText = $this.text();
$this.text($this.text() === "-" + thisText ? ("+" + thisText) : ("-" + thisText));
});
Related
I wish to replace any character not in the passport format(A9999999) from my input text. I have written the following (jsfiddle here):
HTML
Doc Type <input id='docType' value = 'PASS'/> <br>
Doc ID <input id='docId'/>
JS:
$(document).ready(function () {
var docTypeVal = $("#docType").val();
$('#docId').keyup(function() {
if(docTypeVal == "PASS") {
var $th = $(this);
$th.attr("maxlength","8");
if($th.val().length <= 1) {
$th.val().replace(/[^a-zA-Z]/g, function(str) {
alert('You typed " ' + str + ' ".\n\nPlease use correct format.');
return '';
})
}
else if($th.val().length <= 8 && $th.val().length > 1) {
$th.val().replace(/^(?!.*^([a-zA-Z]){1}([0-9]){7}$)/, function(str) {
alert('You typed " ' + str + ' ".\n\nPlease use correct format.');
return '';
})
}
}
});
});
However, firstly, this doesn't replace any characters (wrong/right). Secondly, it gives the alert the moment I enter 2nd character onwards. It should accept the 1st char if it is alphabet (replace otherwise), from 2nd till 8th char it should accept only numbers (replace otherwise).
You can test this with 1 Regular Expression.
/^[a-z]?\d{0,7}$/i
This pattern will look A9 up to A9999999. It will fail on AA or 99.
Example: https://jsfiddle.net/Twisty/awL0onjg/20/
JavaScript
$(function() {
var docTypeVal = $("#docType").val();
$('#docId').keyup(function(e) {
var exc = [
11, // Tab
127, // Del
];
if (exc.indexOf(e.which) > -1) {
return true;
}
var term = $(this).val();
var re = /^[a-z]?\d{0,7}$/i;
console.log("Testing:", term, re.test(term));
if (re.test(term)) {
$(this).removeClass("invalid");
return true;
} else {
$(this).addClass("invalid");
}
});
});
Consider using .keydown() if you want to prevent the User from typing outside of that pattern. See More.
Fiddle Demo
Referred the JS of Twisty's and realized it should be as shown below:
if(docTypeVal == "PASS") {
$(this).attr("maxlength","8");
var term = $(this).val();
var re = /^[a-zA-Z]{1}\d{0,7}$/i;
if (re.test(term)) {
$(this).removeClass("invalid");
return true;
} else {
$(this).addClass("invalid");
$(this).val(term.replace(term.charAt(term.length-1),
function(str) {
alert('You typed " ' + str + ' ".\n\nPlease use correct format.');
return '';
}));
return false;
}
}
I have this javascript function;
i send it a number from a button and all go well untill the index-of method it has a problem.
CODE:
<script lang="ja" type="text/javascript">
function YellowChair(NumId)
{
if (document.getElementById("CheckBox" + NumId).checked)
{
document.getElementById("ChairImg" + NumId).src = "Images/YellowChair.png";
TypeTheNum(NumId, true);
}
else
{
document.getElementById("ChairImg" + NumId).src = "Images/BlueChair.png";
TypeTheNum(NumId, false);
}
}
function TypeTheNum(NumId,Add)
{
var Label = document.getElementById("SelectedSitsLabel");
var Hidden = document.getElementById("SelectedSitsHidden");
if (Label.innerHTML == "")
{
Label.textContent += NumId;
Hidden.textContent += NumId;
}
else
{
if (Add)
{
Label.textContent += "," + NumId;
}
else
{
// getting stuck here.
if (Label.indexOf((NumId + ",").toString()) != -1)
{
alert("1");
Label.replace((NumId + ",").toString(), "");
}
else
{
alert("ELSE");
Label.replace(("," + NumId).toString(), "");
}
}
}
Hidden.textContent = Label.textContent;
}
</script>
i thought maybe its because I insert text with textContent,
also , im pretty sure somthing is wrong with the replace.
Many thanks!
HTMLElement hasn't a method indexOf.String owned the method.remeber reset textContent if the textContent changed.
function YellowChair(NumId)
{
if (document.getElementById("CheckBox" + NumId).checked)
{
document.getElementById("ChairImg" + NumId).src = "Images/YellowChair.png";
TypeTheNum(NumId, true);
}
else
{
document.getElementById("ChairImg" + NumId).src = "Images/BlueChair.png";
TypeTheNum(NumId, false);
}
}
function TypeTheNum(NumId,Add)
{
var Label = document.getElementById("SelectedSitsLabel");
var Hidden = document.getElementById("SelectedSitsHidden");
if (Label.innerHTML == "")
{
Label.textContent += NumId;
Hidden.textContent += NumId;
}
else
{
if (Add)
{
Label.textContent += "," + NumId;
}
else
{
// getting stuck here.
if (Label.textContent.indexOf((NumId + ",").toString()) != -1)
{
alert("1");
Label.textContent=Label.textContent.replace((NumId + ",").toString(), "");
}
else
{
alert("ELSE");
Label.textContent=Label.textContent.replace(("," + NumId).toString(), "");
}
}
}
Hidden.textContent = Label.textContent;
}
<button onclick="TypeTheNum('foo')">Remove `foo`</button>
<div id="SelectedSitsLabel">foo,bar,baz</div>
<div id="SelectedSitsHidden"></div>
Label is a DOM element, not a string. So if you need to get characters from the text inside the element, you have to use something like var content = Label.textContent; content.indexOf() and then replace the textContent again after replacing it in the string.
Also as a sidenote, try to look up the differences between innerHTML, textContent and innerText so you can avoid future issues.
The function:
var element = document.getElementById(id);
Returns an Element object, or null but not an string.
Maybe you want to change your code to use textContent property which seems to be the one you are working on like:
if (Label.textContent.indexOf((NumId + ",").toString()) != -1){
alert("1");
Label.textContent.replace((NumId + ",").toString(), "");
}
else{
alert("ELSE");
Label.textContent.replace(("," + NumId).toString(), "");
}
You need to assign the replacement to something:
Label.textContent = Label.textContent.replace(…)
This should be trivial but I'm having issues...
Basically what I am trying to do is append a new "div" to "selected-courses" when a user clicks on a "course". This should happen if and only if the current course is not already in the "selected-courses" box.
The problem I'm running into is that nothing is appended to the "selected-courses" section when this is executed. I have used alert statements to make sure the code is in fact being run. Is there something wrong with my understanding of the way .on and .each work ? can I use them this way.
Here is a fiddle http://jsfiddle.net/jq9dth4j/
$(document).on("click", "div.course", function() {
var title = $( this ).find("span").text();
var match_found = 0;
//if length 0 nothing in list, no need to check for a match
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (matched == 0) {
var out = '<div class="selected-course">' + '' + title + ''+'</div>';
$("#selected-box").append(out);
}
});
//checks to see if clicked course is already in list before adding.
function match(str) {
$(".selected-course").each(function() {
var retval = 0;
if(str == this.text()) {
//course already in selected-course section
retval = 1;
return false;
}
});
return retval;
}
There was a couple of little issues in your fiddle.
See fixed fiddle: http://jsfiddle.net/jq9dth4j/1/
function match(str) {
var retval = 0;
$(".selected-course").each(function() {
if(str == $(this).text()) {
retval = 1;
return false;
}
});
return retval;
}
You hadn't wrapped your this in a jquery object. So it threw an exception saying this had no method text().
Second your retval was declared inside the each so it wasn't available to return outside the each, wrong scope.
Lastly the if in the block:
if (matched== 0) {
var out = '';
out += '<div class="selected-course">' + '' + title + ''+'</div>';
$("#selected-box").append(out);
}
was looking at the wrong variable it was looking at matched which didn't exist causing an exception.
Relying on checking what text elements contain is not the best approach to solve this kind of question. It is prone to errors (as you have found out), it can be slow, it gives you long code and it is sensitive to small changes in the HTML. I would recommend using custom data-* attributes instead.
So you would get HTML like this:
<div class="course" data-course="Kite Flying 101">
<a href="#">
<span>Kite Flying 101</span>
</a>
</div>
Then the JS would be simple like this:
$(document).on('click', 'div.course', function() {
// Get the name of the course that was clicked from the attribute.
var title = $(this).attr('data-course');
// Create a selector that selects everything with class selected-course and the right data-course attribute.
var selector = '.selected-course[data-course="' + title + '"]';
if($(selector).length == 0) {
// If the selector didn't return anything, append the div.
// Do note that we need to add the data-course attribute here.
var out = '<div class="selected-course" data-course="' + title + '">' + title + '</div>';
$('#selected-box').append(out);
}
});
Beware of case sensitivity in course names, though!
Here is a working fiddle.
Try this code, read comment for where the changes are :
$(document).on("click", "div.course", function () {
var title = $(this).find("span").text().trim(); // use trim to remove first and end whitespace
var match_found = 0;
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (match_found == 0) { // should change into match_found
var out = '';
out += '<div class="selected-course">' + '' + title + '' + '</div>';
$("#selected-box").append(out);
}
});
function match(str) {
var retval = 0; // this variable should place in here
$(".selected-course").each(function () {
if (str == $(this).find('a').text().trim()) { // find a tag to catch values, and use $(this) instead of this
retval = 1;
return false;
}
});
return retval; // now can return variable, before will return undefined
}
Updated DEMO
Your Issues are :
1.this.text() is not valid. you have to use $(this).text().
2.you defined var retval = 0; inside each statement and trying to return it outside each statement. so move this line out of the each statement.
3.matched is not defined . it should be match_found in line if (matched == 0) {.
4. use trim() to get and set text, because text may contain leading and trailing spaces.
Your updated JS is
$(document).on("click", "div.course", function () {
var title = $(this).find("span").text();
var match_found = 0;
if ($(".selected-course").length > 0) {
match_found = match(title);
}
if (match_found == 0) {
var out = '<div class="selected-course">' + '' + title + '' + '</div>';
$("#selected-box").append(out);
}
});
function match(str) {
var retval = 0;
$(".selected-course").each(function () {
if (str.trim() == $(this).text().trim()) {
retval = 1;
return false;
}
});
return retval;
}
Updated you Fiddle
I have multiple selects and would like to add or remove a name attribute depending on the option that is chosen in the first select.
Here is a fiddle for an example:
http://jsfiddle.net/Nirvanachain/DZFFe/
You just had a few things backwards and you forgot the '.' in the class selector: $('.class'). I fixed the fiddle: http://jsfiddle.net/DZFFe/7/
$("#mySelect").change(function() {
$(".selectorClass").removeAttr("name");
var x = document.getElementById("mySelect").value;
if($("#" + x)) {
$("#" + x).attr("name", "myName");
}
});
This should work:
$("#mySelect").change(function() {
var x = $(this).val();
if ($("#" + x).length > 0) {
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name");
}
});
Something like the following?
$("#mySelect").change(function() {
$('.selectorClass').removeAttr('name');
$('#' + $(this).val()).attr('name', 'myName');
});
http://jsfiddle.net/DZFFe/8/
there were problems when !!x === false (ex: empty string in this case). I added a simple check on the if
I also added a missing . to select by class
$("#mySelect").change(function() {
var x = document.getElementById("mySelect").value;
if(x && $("#" + x)) { //added to check if x != ""
$("#" + x).attr("name", "myName");
} else {
$(".selectorClass").removeAttr("name"); //added missing "." to actually select classes
}
});
Here is a jsFiddle
I have the following piece of code:
if((String(parent).length > 0) && (String(this.className).length > 0)) {
where this.className contains the value "top currentMenu"
Using this.className name, I need a means of removing from this.className, "currentMenu" ONLY using jQuery, so that the end result for this.className is just "top".
It is simply:
$(this).removeClass('currentMenu')
Reference: .removeClass
In plain JavaScript you can do something like:
function removeClass(node, cls) {
if(node && node.className && node.className.indexOf(cls) >= 0) {
var pattern = new RegExp('\\s*' + cls + '\\s*');
node.className = node.className.replace(pattern, ' ');
}
}
Or I don't understand your problem :)