How to condense similar JavaScript functions into one?

Question

I have about 30 scripts that are nearly identical except for small differences. I'm wondering if they can all be combined into one.

For instance, here is the HTML which calls on the functions "Writedata" 1 through 3. The remaining 27 are not shown:

<div class="trashitem" onclick="Writedata1()">
  <div class="photobox">
    <img src="http://www.fakeimage.jpg">
    <input type="hidden" name="write" value="4562711" id="mls_id1">
  </div>
</div>
<div class="trashitem" onclick="Writedata2()">
  <div class="photobox">
    <img src="http://www.fakeimage.jpg">
    <input type="hidden" name="write" value="7436743" id="mls_id3">
  </div>
</div>
<div class="trashitem" onclick="Writedata3()">
  <div class="photobox">
    <img src="http://www.fakeimage.jpg">
    <input type="hidden" name="write" value="114992" id="mls_id3">
  </div>
</div>

They each have a unique id with a unique value, which is why I had separate functions being called. The respective scripts are:

<script language="javascript">
  function Writedata1()
  {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var write_id;
    write_id = document.getElementById('write_id').value ;
    var s = fso.CreateTextFile(write_id, true);
    s.WriteLine("RestoreClicked");
    s.WriteLine(document.getElementById('mls_id1').value);
    s.Close();
  }
</script>

<script language="javascript">
  function Writedata2()
  {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var write_id;
    write_id = document.getElementById('write_id').value ;
    var s = fso.CreateTextFile(write_id, true);
    s.WriteLine("RestoreClicked");
    s.WriteLine(document.getElementById('mls_id2').value);
    s.Close();
  }
</script>

<script language="javascript">
  function Writedata3()
  {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var write_id;
    write_id = document.getElementById('write_id').value ;
    var s = fso.CreateTextFile(write_id, true);
    s.WriteLine("RestoreClicked");
    s.WriteLine(document.getElementById('mls_id3').value);
    s.Close();
  }
</script>

Is there a script I can use instead which will apply to all functions named in the format Writedata#() where # is any number. I can't have the script being limited to 30 only, it should be dynamic. Pure JavaScript only please.

UPDATED QUESTION

Here is the full code, even when you click a trashitem div, it doesn't write the text file "keepornew.txt" as it should. It worked before including the script Shomz and Nina provided. Are you able to spot the problem? Thank you

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Trash</title>

<SCRIPT LANGUAGE="VBScript">

    Sub Window_onLoad
        window.resizeTo 175,1031
       window.moveto 0,0
    End Sub 

</SCRIPT>

<HTA:APPLICATION icon="C:\Users\ME\Desktop\Abacus\menuIcon.ico"
     APPLICATIONNAME="WELCOME"
     SCROLL="yes
     SINGLEINSTANCE="no"
     WINDOWSTATE="normal" 
     ShowInTaskBar="no"
     MinimizeButton="yes"
    MaximizeButton="no"
    RESIZE="no"
    CAPTION="no"
> 

<style>
body{background-color:#ffffff;}
body{background-color:#ffffff;}

.bordered{
  border: 3px solid #D64631;
}

.trashitemborder{
 border: 1px solid black;
  width:100%;
  height: 140px;
  margin-top:10px;

}
.trashitem {
    width:100%;
    height:110px;
  margin-left:0px;
  overflow:hidden;
}

.photobox{100%;
  text-align:center;
}
.photobox img{width:100%;
}

.pricebox{
  font-family:arial;
  font-size:15px;
  font-weight:bold;
margin-left:25px;
}

.trashtitle{font-family:arial;
font-size:20px;
color:#D64631;
text-align:center;
margin-top:-25px;
}
.trashcaption{font-family:arial;
font-size:12px;
color:#D64631;
margin-left:-2px;
margin-bottom:9px;
text-align:center;
}

</style>
<script language="javascript">
function Writedata(id)
{
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var write_id;
  write_id = document.getElementById('write_id').value ;
  var s = fso.CreateTextFile(write_id, true);
  s.WriteLine("RestoreClicked");
  s.WriteLine(document.getElementById('mls_id' + id).value);
  s.WriteLine(document.getElementById('marker_id' + id).value);
  s.Close();
}
</script>

<script language="javascript">
window.onload = function (event) {

    var myitem = document.querySelectorAll(".trashitem");
    for(h=0; h<myitem.length; h++){
        myitem[h].onclick = function(e){
            var myitem = document.querySelectorAll(".trashitem");

            for(h=0; h<myitem.length; h++){
                myitem[h].classList.remove("bordered");
            }
            this.classList.add("bordered");

        };
    }
};
</script>

</head>

<body>
<input type="hidden" name="write" value="C:\Users\ME\Documents\Temp\keepornew.txt" id="write_id"><br/>

<div class="trashtitle">TRASH</div>
<div class="trashcaption">Click comp to restore</div>

<input type="hidden" name="filler" value="filler" id="filler_id">
<input type="hidden" name="MarkerA4" value="MarkerA4">
<div class="trashitemborder">
<div class="trashitem" onclick="Writedata(4)">
    <div class="photobox">
     <img src="http://www.fakeimagecom/image1.JPG">
    </div>
 <input type="hidden" name="write" value="5189975" id="mls_id4">
<input type="hidden" name="write" value="4" id="marker_id4">
     <div class="pricebox">$325,000</div>  
</div>
</div>
<input type="hidden" name="MarkerB4" value="MarkerB4">
<input type="hidden" name="MarkerA3" value="MarkerA3">
<div class="trashitemborder">
<div class="trashitem" onclick="Writedata(3)">
    <div class="photobox">
       <img src="http://www.fakeimagecom/image1.JPG">
    </div>
 <input type="hidden" name="write" value="5158764" id="mls_id3">
<input type="hidden" name="write" value="3" id="marker_id3">
     <div class="pricebox">$320,000</div>  
</div>
</div>
<input type="hidden" name="MarkerB3" value="MarkerB3">
<input type="hidden" name="MarkerA2" value="MarkerA2">
<div class="trashitemborder">
<div class="trashitem" onclick="Writedata(2)">
    <div class="photobox">
      <img src="http://www.fakeimagecom/image1.JPG">
    </div>
 <input type="hidden" name="write" value="201500274" id="mls_id2">
<input type="hidden" name="write" value="2" id="marker_id2">
     <div class="pricebox">$302,500</div>  
</div>

<input type="hidden" name="MarkerB2" value="MarkerB2">
<input type="hidden" name="MarkerA1" value="MarkerA1">
<div class="trashitem" onclick="Writedata(1)">
    <div class="photobox">
        <img src="http://www.fakeimagecom/image1.JPG">
    </div>
 <input type="hidden" name="write" value="5076992" id="mls_id1">
<input type="hidden" name="write" value="1" id="marker_id1">
     <div class="pricebox">$375,000</div>  
</div>
<input type="hidden" name="MarkerB1" value="MarkerB1">


</body>
</html>

Do these `.trashitem` elements share a common parent? Are there any other elements in that same parent? — David Thomas, Aug 15 '15 at 17:25
has the script ever worked? my problem is the event is catch from border mechanism, so the trashitem is never reached. — Nina Scholz, Aug 16 '15 at 11:42

score 1 · Accepted Answer · answered Aug 15 '15 at 17:22

1

Simply make a single function that will accept the id as a parameter:

function Writedata(id)
{
  var fso = new ActiveXObject("Scripting.FileSystemObject");
  var write_id;
  write_id = document.getElementById('write_id').value ;
  var s = fso.CreateTextFile(write_id, true);
  s.WriteLine("RestoreClicked");
  s.WriteLine(document.getElementById('mls_id' + id).value);
  s.Close();
}

And then call it like:

<div class="trashitem" onclick="Writedata(1)">
<div class="trashitem" onclick="Writedata(2)">
<div class="trashitem" onclick="Writedata(3)">
etc...

You can even avoid manually entering IDs by distinguishing the index of the clicked element within its parent.

answered Aug 15 '15 at 17:22

Shomz

37,421
4
57
85

Thank you, I will try it soon and report back. – Mathomatic Aug 15 '15 at 18:08
Thank Shomz for your help. I didn't include it in the HTML, but the write_id is associated with this html:
. For some reason when I click one of the divs now, it won't write the text file anymore when I use your code. It works however with my previous code. Any idea why? Thanks – Mathomatic Aug 15 '15 at 18:43
You're welcome. Are you getting any errors in the console? – Shomz Aug 15 '15 at 18:54
Btw. you have a duplicate id: `mls_id3` so `Writedata(2)` will not work and `Writedata(3)` might not write what you expect. – Shomz Aug 15 '15 at 18:59
That's a typo, my real file doesn't have that. – Mathomatic Aug 15 '15 at 19:33
Sorry to leave you in the dark Shomz. I've included the full code in my updated question. I'm feeling stuck, any help is great. Thanks :) – Mathomatic Aug 15 '15 at 21:29
Hey, no problem, glad you're back. What puzzles me is that you say your original function works, but mine doesn't - yet they are practically the same code. Are you getting any console errors? – Shomz Aug 15 '15 at 21:47
Shomz I think there is a misunderstanding. By my original code I mean without the script you provided, and instead using my redundant code. Here is a link to the full code I'm referring to. The text file is being written to a folder specific to my PC, so you'll need to adapt it to your PC's directory. But it works for me, if I click the div item, it writes the text file with the correct values outlined in the single script. Why won't it work with your updated code though? Here's the code link: http://pastebin.com/Xnq2jVGD . Thanks a ton – Mathomatic Aug 16 '15 at 01:54
Comparing the two codes, the version with my function in it (http://pastebin.com/iRDS65WM) doesn't have the `#value_id` input which is crucial because it contains the file name, and it also has some weird onload function with nested loops which use the same iterator. That's why it doesn't work - there are other differences in the code, not just the script I gave you. – Shomz Aug 16 '15 at 07:24

Nina Scholz · Answer 2 · 2015-08-15T17:28:12.553

0

function Writedata(id) { // <-------------------------- add id as parameter
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var write_id = document.getElementById('write_id').value;
    var s = fso.CreateTextFile(write_id, true);
    s.WriteLine("RestoreClicked");
    s.WriteLine(document.getElementById(id).value); // <------- use it here
    s.Close();
}

btw, document.getElementById('write_id').value where do i find the id write_id in your html code?

edited Aug 15 '15 at 17:28

answered Aug 15 '15 at 17:22

Nina Scholz

376,160
25
347
392

Thank you, I will try it soon and report back. – Mathomatic Aug 15 '15 at 18:08
I didn't include it in the HTML, but it is:
. For some reason when I click one of the divs, it won't write the text file anymore when I use your code. It works however with my previous code. Any idea why? – Mathomatic Aug 15 '15 at 18:42
My apologies Nina. I've updated the question to contain the full code. Any feedback is awesome. Thank you. – Mathomatic Aug 15 '15 at 21:29

score 0 · Answer 3 · answered Aug 15 '15 at 17:40

I'd personally suggest the following approach:

function Writedata() {
    var fso = new ActiveXObject("Scripting.FileSystemObject"),
        write_id = document.getElementById('write_id').value,
        s = fso.CreateTextFile(write_id, true),

        // here we find the elements contained within the
        // clicked element (this) with the name property/attribute
        // of 'write':
        valueFromElement = this.getElementsByName('write');

    s.WriteLine("RestoreClicked");

    // here we retrieve the value from the relevant element
    // using zero-based indexing:
    s.WriteLine(valueFromElement[0].value);
    s.Close();
}

// retrieving all elements with the class-name of 'trashitem',
// compatible with IE8+ (getElementsByClassName() was preceded
// in IE by querySelectorAll(), so this is more compatible
// than using getElementsByClassName()):
var trashitems = document.querySelectorAll('.trashitem');

// iterating over the NodeList returned by querySelectorAll(),
// using Function.prototype.call() to allow
// Array.prototype.forEach() to be used on the Array-like NodeList:
Array.prototype.forEach.call(trashitems, function (trashitem) {

    // assigning the Writedata() function as the click-event
    // handler for each .trashitem element-node:
    trashitem.addEventListener('click', Writedata);
});

JS Fiddle demo.

Which also removes the need for the (intrusive) onclick attributes and takes advantage of the addEventListener() method's ability to pass the clicked-element to the associated function handling the specified event.

References:

Thank you, I will try it soon and report back. – Mathomatic Aug 15 '15 at 18:08 — Mathomatic, Aug 15 '15 at 18:08

How to condense similar JavaScript functions into one?

3 Answers3

Linked