Javascript DOM manipulation: changing text of an element

Question

I tried to print the results of the function calculation() to the text area but it seems not working. Can you please help!

<head>
  <title>Lab 6</title>
<script>
function calculate(){
for (var i=100; i<1000; i++) {
var x = i%10;
var y = Math.floor((i/10)%10);
var z = Math.floor((i/100)%10);
 if (i== x*x*x +y*y*y + z*z*z) {

document.getElementbyTagname("textarea").innerHtml = i;
document.getElementbyTagname("button").addEventListener("click",
calculate());
}}} 

</script>
</head>

<body>
<textarea rows="4" cols="50"> </textarea>
<button type="button">Click Me!</button>
</body>

</html>

The function is `getElementsByTagName` not `getElementbyTagname`. `The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name..` [see](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) and not work because yo cant set an event listener to HTMLCollection, you can acces to the first element like an array.. — kip, Nov 04 '17 at 02:48
First of all, you are calling elements before being created in the DOM; second, the function document.getElementbyTagname and the property innetHtml doesn't exist; third, you cant change the value of a text area with innerHTML (what I think you are trying to do). — JulianSoto, Nov 04 '17 at 02:52
Possible duplicate of [How to change the Content of a with Javascript](https://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript) — JulianSoto, Nov 04 '17 at 02:54
And fourth, you are not running the event listener of the button, so the function calculate will never executed. Please clearify your code before asking. — JulianSoto, Nov 04 '17 at 02:57

qingqing · Answer 1 · 2017-11-04T03:35:41.543

Hi I have edit your code to make it work, I don't really get your logic, so not sure if that is what you want. But you can look at the my syntax to refine your own code. Also You made several mistakes. 1. 'getElementbyTagname' should be 'getElementsByTagName' 2. you didn't put the event function to the right place to trigger the click event.

`var btn = document.querySelector(' .btn') btn.addEventListener('click', function(e){ calculate()

})
function calculate(){
      for (var i=100; i<1000; i++) {
                var x = i%10;
                var y = Math.floor((i/10)%10);
                var z = Math.floor((i/100)%10);
                if (i== x*x*x +y*y*y + z*z*z) {
                    var text = document.querySelector(' .demo')
                   text.innerHTML = i

                }}}`

score 0 · Accepted Answer · answered Nov 04 '17 at 04:50

I try to rewrite your code. try once may this help...

<head>
  <title>Lab 6</title>
<script>
function calculate()
{
    for (var i=100; i<1000; i++) 
    {
        var x = i%10;
        var y = Math.floor((i/10)%10);
        var z = Math.floor((i/100)%10);
        if (i== x*x*x +y*y*y + z*z*z) 
        {

            document.getElementsByTagName("textarea")[0].innerHtml = i;

        }
    }
} 
document.getElementsByTagName("button")[0].addEventListener("click",calculate());
</script>
</head>

<body>
<textarea rows="4" cols="50"> </textarea>
<button type="button">Click Me!</button>
</body>

score 0 · Answer 3 · answered Nov 04 '17 at 05:05

Try this out. Made many changes to your code,

function calculate(){
var txt="";
for (var i=100; i<1000; i++) {
var x = i%10;
var y = Math.floor((i/10)%10);
var z = Math.floor((i/100)%10);
if (i== x*x*x +y*y*y + z*z*z) 
{ 
 txt = txt + i + "\n";
 
}
}

document.getElementById("textarea").innerHTML = txt;
}

<html>
<head>
  <title>Lab 6</title>
</head>

<body>
<textarea rows="4" cols="50" id="textarea"> </textarea>
<button type="button" onclick="calculate();">Click Me!</button>
</body>

</html>

Javascript DOM manipulation: changing text of an element

3 Answers3