using substring to clear the last letter of a string in javascript - javascript

I have a textarea with the id display_main.
I need this backspacing function to clear the last letter or number of the text area.
This code below did not work.
Please explain.
function backspacing(){
document.getElementById("display_main").substring(0, display_main.length - 1);
}

document.getElementById returns an element. Elements aren’t strings, so it doesn’t make sense to take substrings of them. You’ll need to use its value property, which is the text contained in the textarea (and many other input elements):
function backspacing() {
var displayMain = document.getElementById("display_main");
displayMain.value.substring(0, displayMain.value.length - 1)
}
Also, substring doesn’t modify the string it’s called on; strings are immutable. It returns a new string, which you need to assign to something:
function backspacing() {
var displayMain = document.getElementById("display_main");
displayMain.value = displayMain.value.substring(0, displayMain.value.length - 1);
}

Because you're trying to substring the element, instead of the element's value
var element = document.getElementById("display_main");
element.value = element.value.substring(0, element.value.length - 1);

Should be:
function backspacing(){
var textarea = document.getElementById("display_main");
textarea.value = textarea.value.substring(0, textarea.value.length - 1);
}

get first text area value and apply substring function.
textAreaValue = document.getElementById("display_main").value
then apply substring function on value then again set modify value to textarea.

You can clear the last character of the textbox and assign it to itself with this code
function backspacing() {
var textbox = document.getElementById("display_main");
textbox.value = textbox.value.slice(0,-1) ;
}
Or if you have jQuery library loaded you can use :
function backspacing() {
$("#display_main").val($("#display_main").val().slice(0,-1));
}

Related

.split() a data attribute isn't working when it should

I want to .split(" ") a data attribute value but it returns empty:
var bulletcontent = jQuery(this).closest("div").find("p").attr('data-bcontent');
// split content into words
var words = jQuery(bulletcontent).text().split(" ");
Why isn't this working?
Here is a jsFiddle.
See the fiddle: https://jsfiddle.net/43439o8o/2/
You dont need to get the .text(), the .attr() already return his content:
var bulletcontent = jQuery(content).attr('data-bcontent');
// split content into words
var words = bulletcontent.split(" "); //Remove the .text() method
As you can see at the .attr() method docs, you can use it to return or set the attribute value:
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
change this line:
var words = bulletcontent.split(" ");
$(document).ready(function() {
$(document).on("click", ".click", function() {
// find the bullet content stored in p tag inside li
var content = $(this).prev("p").attr('data-bcontent');//get the p attr
alert(content)
var words = content.split(' ')//split
alert(words[0]);//alert first value
alert(words[1]);//alert second value
});
});
DEMO
You can use directly function split() on the string:
var words = bulletcontent.split(" ");
for example you can see this link
.split() is a Method of String in Javascipt so there's no need to use jQuery. just add .split(' ') right next to your variable(String).
.split() returns array of strings depends on how you want to plit the original string.
This should work for you.
var words = bulletcontent.split(" ");
You can use this:
var words = bulletcontent.split(" ");

Setting text within p tag with js variable

I am setting a text value within a p tag to a string being parsed out by splitting. When I alert the variable, I am able to see the text, however when I try to set the text to the variable value, I am unable to see a change. How do I edit this code to set the text within #view_head to the variables I pass within $('#view_head').text(//variable here//)?
The code
$(edit_but).click(function(e){ //on add input button click
//e.preventDefault();
//uses set input data to create variables for use in editor
var master_string = $('#string_text').text();
var key_string = master_string.split("|m|");
var name_string = key_string[0].split("|s|");
var cont_string = key_string[1].split("|s|");//contains contact variables
var adr_string = key_string[2].split("|s|");
var qual_string = key_string[3].split("|s|");//contains description and applying for blob text
var pos_key_string = key_string[4].split("|s|");
var edu_key_string = key_string[5].split("|s|");//key string to contain edu strings
var course_key_string = key_string[6].split("|s|");
var awd_key_string = key_string[7].split("|s|");
var skill_key_string = key_string[8].split("|s|");
var count_key_string ='';
var pos_string = pos_key_string[0].split("|j|");
alert (pos_key_string); //working
alert (name_string);
$('#view_head').text(key_string); //not working, does not change
alert (key_string); //working, can see value in alert for both
//window.location = '#openModal';
});
String.split() returns an array, and .text() waits for Type: String or Number or Boolean. - http://api.jquery.com/text/
Try to get it $('#view_head').text(key_string.toString()); or $('#view_head').text(key_string[0]); if data, that you are looking for is in first array element.
if text() is not working,maybe you could try val() or html()
Using String.split() returns an Array object, which you cannot insert into an HTML element as text. To create a String from an Array, which can be inserted into an HTML element, use the Array.join() method. EG.
var sample_string = "This is a String";
// split at spaces into an Array
var sample_array = sample_string.split(' ');
//--> ['This','is','a','String']
// join with spaces into a String
var another_string = sample_array.join(' ');
//--> "This is a String"
See MDN : String.prototype.split() & Array.prototype.join()

onchange method not showing text after using substring javascript

Somehow there is a problem when I use the substring in javascript. I'm trying to take the last 2 letters out of a 4 letter value and print in out in the div with id=text.
This works without using substring
$("#departureroute").change(function () {
var value = (this.value);
$("#test").text(value);
}).change();
This does not work, using substring
$("#departureroute").change(function () {
var value = (this.value);
var res = value.substring(2, 2);
$("#test").text(res);
}).change();
Any ideer what is happening?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
Per the manual, the substring method takes the index of the beginning of the substring and index of the end of the substring. The second argument is optional and will go to the end of the string if not provided. So change it to:
$("#departureroute").change(function () {
var value = (this.value);
var res = value.substring(2);
$("#test").text(res);
}).change();

How to trim all characters and numbers from INPUT?

so i have this function that displays the inputted value of the user. I want to erase them all after clicking a specific button.
Here's the code:
HTML
<center> Are you sure you want to delete all?<br><br></center>
<div id="options11" onclick="EraseMe()"> Yes</div>
<div id="options12" onclick="CloseButton()">No</div>
JS:
function List(){
document.getElementById('order').innerHTML += document.getElementById('Name').value + document.getElementById('quan').value + parseInt(document.getElementById('Total').value);} //gets the inputted value of the user
function EraseMe(){
var name = document.getElementById('Name').value;
var quan = document.getElementById('quan').value;
var totals = document.getElementById('Total').value;
name.replace(/^[a-zA-Z0-9]$/, "");
quan.replace(/^[a-zA-Z0-9]$/, "");
totals.replace(/^[a-zA-Z0-9]$/, "");}
and also, i want to sum up all the value of the document.getElementById('Total') , but the result I'm having is a value of a string, not as an integer.
Here's the code for that:
function compute(){
totall = document.getElementById('quan') * document.getElementById('price');
document.getElementById('totalsss').value += parseInt(totall);
document.getElementById('totalsss').innerHTML = document.getElementById('totalsss').value;}
One problem, is that replace is a pure function and does not modify the input - as such, the result of String.replace must be used.
Another is the regular expression is anchored (meaning it would only match input of a single character in the given case), and yet another is the regular expression is not global (meaning it would only match once) ..
Try:
var nameElm = document.getElementById('Name');
// assign replacement result back to input's value,
// after substituting all (g) English alphabet characters/numbers
// with nothing .. any other characters will remain
nameElm.value = nameElm.value.replace(/[a-zA-Z0-9]/g, "");
If you want to blank something, just replace it with an empty string:
function EraseMe(){
document.getElementById('Name').value = "";
document.getElementById('quan').value = "";
document.getElementById('Total').value = "";
}
There's no reason to do that regex replacement unless there's something you want to keep.

Javascript need variable that can represent any number

I'm a javascript novice so this may be a dumb question. I'm trying to generate a script that takes the phrase "(x items)" and changes it to "(x)", where x can represent any number.
Here's what I have now:
<script type="text/javascript">
$(document).ready(function(){
function changeText(){
$(".CartLink:contains('2 items')").html('Cart <span>(2)</span>');
}
changeText();
$(document).ajaxSuccess(function() {
changeText();
});
});
</script>
The above script is able to replace the phrase "(2 items)" with "(2)" but I need to modify the script so that 2 can be any number. Thank you.
This is the HTML that .CartLink element contains:
<li style="display:" class="CartLink">Cart <span>%%GLOBAL_CartItems%%</span></li>
Ideally this should be a server-side task. But if you have a limitation requiring you to do this client-side...
You don't need to replace all of the html. You can simply modify the text of the span:
$('.CartLink span').text(function(_, val) {
return val.replace(' items', '');
});
Your can use split to seperate the count and text.
http://jsfiddle.net/B2meD/
$( document ).ready(function() {
$(".CartLink").html('Cart <span>'+$(".CartLink").text().split(" ")[0]+'</span>');
});
Javascript as a string replace method. So you can simply remove the items part.
var foo = ('2 items');
var newFoo = foo.replace("items", "");
Then newFoo would become ('2')
S('.CartLink').text($('.CartLink').text().split(' ')[0])
Where are you getting the "2" variable from?
var items = 2;
items ++; //items = 3;
$('.Cart').html("Items in cart:" + items.toString() + ". Foo");
See how I added the "+" to add up the strings?
I must add, this is just bad js.
For making your items variable:
var str = "(Items 2)";
var numberStr = "(" + str.split(" ").pop(); //makes "(2)" or use .replace or whatever works.
Keep in mind that making a variable from a string will result in another string. If you want to manipulate your new items var as a number, you have to get an integer like so,
var numberStr = "(3)";
var int = parseFloat(numberStr.replace(/["'()]/g,""));
If you replace your changeText function with this it should work as you want:
function changeText() {
var itemCountSpan = $(".CartLink a span")
if (/(\d+) items/.test(itemCountSpan.text())) {
itemCountSpan.text(RegExp.$1);
}
}
Here's a simple RegEx version.
$(document).ready(function(){
function changeText(){
$(".CartLink").each(function() {
var newhtml = $(this).html().replace(/\((\d+) items\)/, "($1)");
$(this).html(newhtml);
});
}
changeText();
});
It looks at every element with the CartLink class for the string (x items) where x is one or more digits and removes the word "items". $1 is a property that gets set when the (\d+) parenthesised match is made, allowing us to use the number we want in our replacement string.

Categories