I have an html with a span like this:
<span class="className">0</span> and it should display: 0
The problem is, how could I add a value (e.g. when value is 2, it will become 3) to the span by clicking a button and by doing it using javascript.
You can modify the content of any HTMLElement using:
innerHTML
textContent
look at this snippet:
document.addEventListener("DOMContentLoaded", function(){
var button = document.querySelector("#mybutton");
var span = document.querySelector(".className");
button.onclick = function() {
span.textContent= parseInt(span.textContent, 10) + 1;
}
});
<span class="className">0</span>
<button id="mybutton">add</button>
EDIT: If you want to use onclick="" which I don't recommend, you could do something like this:
var myFunction = function() {
var span = document.querySelector(".className");
span.textContent= parseInt(span.textContent, 10) + 1;
}
<span class="className">0</span>
<button id="mybutton" onclick="myFunction()">add</button>
Related
Basic html:
<button id="changer">Changer button</button>
<div id="text"> </div>
"Changer" is the button element in html, "text" is the div tag in which our text will be placed.
var selector = 0;
We set the selector to 0. Next, every time the button "changer" is clicked, we add 1 to the selector var, unless it has reached its max value of 14, in which case we start over. And based on the selector value, we pick from the available text values.
document.getElementById("Changer").onclick = function () {
if (selector < 14) {
selector++;
}
else {
selector = 0;
selector++;
}
document.getElementById("text").innerHTML = text;
}
if (selector = 1 ){
text = "<p>this is text 1</p>";
if (selector = 2 ){
text = "<p>this is text 2</p>";
etc...
The problem is, the function upon being clicked jumps right to the last text value available. How do I fix this? Will add live example soon if needed.
Your are assigning the selector inside the if condition to a value.
if(selector = 1) {...
What you actually want to do is check if the selectors value is equal to something like so:
if(selector == 1) {...
But you do not need to repeat the check, you can simply do:
var selector = 0;
var btn = document.getElementById('changer');
var output = document.getElementById('text');
btn.addEventListener('click', function() {
if (selector < 14) {
selector++;
output.innerHTML = "<p>this is text " + selector + "</p>";
} else {
selector = 0;
output.innerHTML = "";
}
})
<button id="changer">Changer button</button>
<div id="text"> </div>
I have a button on my page with click counter as span (with class .counter). Once the button is clicked, +1 should be added to the counter (on page, not in console). How can I add 1 to the string in span, currently innerHTML is 0? I tried with the code below but it doesn't work, unfortunately. When I tried without parseInt, digits were added to a span so I got e.g. 011 instead of 2.
document.addEventListener("DOMContentLoaded", function () {
var counters = document.querySelectorAll(".counter");
var btn1 = document.getElementById("button1");
function btn1Count (event) {
parseInt(counters[0].innerHTML,10) += 1;
}
btn1.addEventListener("click", btn1Count);
});
Use parseInt but like :
counters[0].innerHTML = parseInt(counters[0].innerHTML,10) + 1;
NOTE : It'll be better to use textContent instead if you would just to append text (No html) :
counters[0].textContent = parseInt(counters[0].textContent,10) + 1;
Hope this helps.
var btn1 = document.getElementById("button1");
var counters = document.querySelectorAll(".counter");
btn1.addEventListener("click", btn1Count);
function btn1Count (event) {
counters[0].textContent = parseInt(counters[0].textContent) + 1;
}
<button id="button1">Button 1</button>
<br>
<span class='counter'>0</span>
Just change
counters[0].innerHTML = parseInt(counters[0].innerHTML,10) + 1;
you just didn't set the span content
i append a textarea with a button
$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");
After that , i'm writing new texts into textarea and trying to get new writed value inside from textarea with this on click function ;
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
});
But it says that this an "empty string" , if i add text area with a value like <textarea id="myTextarea">some text</textarea> my fucntion works and gives me "some text" but if i edit textarea and click sendReply button (my on click function), it is still gives me "some text" , it don't change
How can i get edited textarea value after apppend a textarea?
You have an . in .sendReply while appending the HTML
You just need to remove . from .sendReply
Use
<div class='sendReply btn btn-default'>my button</div>"
As you are using Event delegation your jQuery will work.
As you are adding textarea with same ID multiple times? $("#myTextarea").val() will always show value of first textarea with id myTextarea. You can use a common class and then use prev() to select the textarea
See example
$(document).ready(function() {
$(document).on('click', '.sendReply', function() {
var myNewText = $(this).prev(".myTextarea").val();
alert(myNewText);
});
for (var i = 0; i < 5; i++) {
$(".mydiv").append("<textarea class='myTextarea'>some text</textarea><div class='sendReply btn btn-default'>my button</div>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mydiv'></div>
It should be
$(".mydiv").append("<textarea id='myTextarea'></textarea><div class='sendReply btn btn-default'>my button</div>");
then
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
});
dont use dot(.) for the classname..
Instead using div .. use some standard to code up .. you can make it has button .. here is the code
<div class="mydiv"></div>
$(".mydiv").append("<textarea id='myTextarea'></textarea><input type='button' class='sendReply btn btn-default' value='my button'></input>");
jQuery(document).on('click','.sendReply', function () {
var myNewText = $("#myTextarea").val();
console.log(myNewText);
alert(myNewText);
});
JSFIDDLE
I'm trying to replace all instances of a font
tag that has a color attribute like this:
<font color="red">Some text</font>
with this:
<span style="color: red;">Some text</span>
I did some hunting on StackOverflow and found this link, and modeled my code after it:
Javascript JQuery replace tags
I've created a little jQuery loop below that is supposed to do the following:
Go through the string(contents of a div)
Get the font color attribute
Replace the tags with a
Set a CSS style attribute with the appropriate color.
Right now, it doesn't work. I just get an error stating that 'replaceWith' is not a function.
$('font').each(function () {
var color;
this.$('font').replaceWith(function () {
color = this.attr("color");
return $('<span>').append($(this).contents());
});
this.$("span").attr("style", "color=" + color);
});
Any help would be greatly appreciated!
There is no need for each, replaceWith will do it internally.
$("font").replaceWith( //find all font tags and call replace with to change the element
function(){
var tag = $(this);
return $("<span/>") //create new span
.html(tag.html()) //set html of the new span with what was in font tag
.css("color", tag.attr("color")); //set the css color with the attribute
}
);
JSFiddle: http://jsfiddle.net/qggadmmn/
$('font').each(function () {
var $this = $(this);
var color = $this.attr('color');
var text = $this.text();
var span = $('<span style="' + color '">' + text + '</span>';
$this.before(span);
$this.remove();
});
Quite a late answer, but I think it's still worth it posting.
If your font tags may have other attributes than just color (ie: face, size), this would cover them all:
HTML (Example)
<font color="red" size="3">Some text</font>
<br />
<font color="blue" face="Verdana">Some text</font>
jQuery (Javascript):
$(function () {
var fontSizes = [
'xx-small', // 1
'x-small', // 2
'small', // 3
'medium', // 4
'large', // 5
'x-large', // 6
'xx-large' // 7
];
$('font').replaceWith(function () {
var attrs = this.attributes;
var span = $('<span />').append($(this).contents());
for (var i = 0; i < attrs.length; i++) {
var name = attrs[i].name;
var value = attrs[i].value;
if (name.indexOf('face') >= 0) {
name = 'font-family';
}
if (name.indexOf('size') >= 0) {
name = 'font-size';
value = fontSizes[value - 1];
}
span.css(name, value);
}
return span;
});
});
Demo
I want to use
<span id="cLeft">10</span>left.</div>
instead of
<textarea id="cLeft">10</textarea>left.</div>
My function below works fine with textarea id="cLeft" but doesn't fire with span id="cLeft". What's wrong with my code?
myTrail.addEventListener('keypress', function countChars() {
var limitChars = "10";
var stringChars = document.getElementById("myTrail").value;
var lengthChars = stringChars.length;
if (lengthChars <= limitChars) {
document.getElementById("cLeft").value = limitChars - lengthChars;
} else {
document.getElementById("myTrail").value = stringChars.substr(0, 10);
}
});
Here is JSFiddle:
http://jsfiddle.net/pshmM/3/
a <span> has no value
document.getElementById("cLeft").textContent = limitChars - lengthChars;
If you're using a <textarea> you should alter its value:
document.getElementById("cLeft").value = limitChars - lengthChars;
But, if you're using a <span> it has no value, it instead has content, or in other words:
document.getElementById("cLeft").innerHTML = limitChars - lengthChars;
innerHTML !