This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.
You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this
Related
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 1 year ago.
Im trying to create a calculator for a formula. This function works, I have seen in the console. I just can't figure out how to display the output.
enter image description here
Here it goes;
Like the comment said there are different way and all depends on your context and UI.
Here is quick possibility how you can take your own code forward to show html;
DOM Inner HTML property
I have just used a button to trigger the function with runs your calculation function and then updates the div that we predefined. This part could be any thing for that matter.
function add(a,b){
return a+b;
}
console.log(add(1,4));
var displayhtml = document.querySelector('div');
var trigger = document.querySelector('button');
trigger.onclick = function (){
displayhtml.innerHTML = add(1,4);
}
<div>I am div</div>
<button>chnage html</button>
This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?
Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);
targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find
This question already has answers here:
Creating multiline strings in JavaScript
(43 answers)
Closed 7 years ago.
I need to generate 185 lines of html on a web page when the user clicks on a button and I want to declare the html code as a multiple lines on a variable but I 've problems with the html code on a variable, I tried several ways researching on the web but I couldn't achieve it.
For example:
<script type="javascript">
//it doesn't work
var html = " <li> <!-- 185 lines of html --> </li>";
</script>
Using Heredoc (I thought heredoc notation doesn't work on Javascript -???-) notation seems that works but the javascript contained on the html shows an error.
I really appreciate any help.
You can do something like this:
document.getElementById('button').onclick = function(){
var eleContainer = document.getElementById('container'), //The parent of the of the elements
html = '', //Will be filled with html lines
repeats = 128; //You can change it as much as you want
for(var i=0; i<repeats; i++){
html += '<li></li>';
}
eleContainer.innerHTML = html;
}
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/
Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE
This question already has answers here:
jQuery appended table adds closing tag at the end of the text automatically. Why?
(4 answers)
Closed 8 years ago.
I am adding a table to a page in javascript using.
$("#tablediv").append("<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>");
The problem is that what it is run </tbody> and </table> is getting added at the end.
How can I stop this from happening?
Thanks.
Are you trying to add new elements to the table after you create it?
ID your table and then append to that.
$("#tablediv")
.append("<table id='mytable' border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr></table>");
$("#mytable")
.append("<tr><td>Bla</td><td>Foo</td><td>Bar</td></tr>");
Call the second jQuery function each time you want to add a new row to your table.
I'm under the impression you want this so you can loop through outputting your results?
var table = "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>";
// loop through your data here
table += "</tbody></table>";
document.getElementById("tablediv").innerHTML += table;
create var, append your stuff to it and then when you're ready call .append(html)
var html = "";
html += "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>"
$("#tablediv").append(html);
You can't. You are operating on a DOM, not a stream of HTML.
jQuery allows you to use HTML syntax to describe a DOM fragment to be created (which you can then insert or otherwise manipulate), but that is just for convenience. If the HTML isn't a valid fragment, it will be error corrected.
If you want to deal in pieces of HTML, you have to do so as strings, not jQuery objects