CODEWITHSUNDEEP
javascriptfunction
Mathomatic
Mathomatic

Reputation: 929

How to condense similar JavaScript functions into one?

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>

Upvotes: 0

Views: 288

Answers (3)

David Thomas
David Thomas

Reputation: 253318

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:

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386570

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?

Upvotes: 0

Shomz
Shomz

Reputation: 37701

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.

Upvotes: 1

Related Questions