CODEWITHSUNDEEP
javascript
Ireally Rock
Ireally Rock

Reputation: 236

getElementsByClassName only getting one item

I am trying to save an input box and when using document.getElementsByClassName The action only works on the last item.

I have created a fiddle http://jsfiddle.net/ktcle/6P8yx/2/

If you enter text in the first textbox and save it returns blank, however it you enter text in the second textbox it returns for both save buttons

var fileNameToSaveAs = document.getElementById("tlt").innerHTML;
var myDivObj = document.getElementById("tlt").innerHTML;    

var items = document.getElementsByClassName('notesApp');
for (var i = 0; i < items.length; i++) {
    var textToWrite =   items[i].value
    //alert(textToWrite);
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
}

I need each box to save the correct text input

thanks

Upvotes: 0

Views: 955

Answers (4)

Aaron Planell L&#243;pez
Aaron Planell L&#243;pez

Reputation: 11

Try with a While:

var allSuccess = document.getElementsByClassName("btn btn-lg btn-success");
while (allSuccess.length>0) {
    allSuccess[0].disabled = true;
    allSuccess[0].className = "btn btn-lg";
    allSuccess = document.getElementsByClassName("btn btn-lg btn-success");
}

Upvotes: 1

Nonesome
Nonesome

Reputation: 98

The two buttons do the same things when clicked. Getting the second textarea's content.

so give a param to saveTextAsFile the textarea's id you need. And get the correct content you want.

<div>
<textarea id="inputTextToSave" class="notesppp"></textarea> 
    <button onclick="saveTextAsFile('inputTextToSave')" class="btn">Save Notes</button>

</div>   
<div>     
    <textarea id="inputsecondbox" class="notesApp" ></textarea> 
    <button onclick="saveTextAsFile('inputsecondbox')" class="btn">Save Notes</button>
</div>

function saveTextAsFile(textId)
{
    var fileNameToSaveAs = document.getElementById("tlt").innerHTML;
    var myDivObj = document.getElementById("tlt").innerHTML;    

// changed

    var item = document.getElementsById(textId);
    var textToWrite = item.value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
// changed

 .....

}

Upvotes: 0

xxx
xxx

Reputation: 182

var textToWrite = ""
for (var i = 0; i < items.length; i++) {
    textToWrite += items[i].value
    //alert(textToWrite);
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
}

Upvotes: 1

DevDude
DevDude

Reputation: 385

There are 2 mistakes:

  1. As @xxx pointed out you have 'notesppp' instead of 'notesApp' in the class attribute.
  2. More importantly, you are replacing textFileAsBlob in the for loop instead of appending to it.

See the section on Building Blobs for appending to blobs here:

https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-22/blobs

Upvotes: 1

Related Questions