function myFunction1() {
        var set1 = document.getElementById("myseta").value;
        var set2 = document.getElementById("mysetb").value;
        var set3 = document.getElementById("mysetc").value;
        
        // calculate the union
        var union = set1.concat(set2, set3).filter(function(element, index, array) {
        return array.indexOf(element) === index;
         });
         
         // [1, 2, 3,]
         // document.getElementById("result").innerHTML = set1;
         // document.getElementById("union").innerHTML = set1;
    }
    

i wanted to get the union of 3 sets and display in the result, im quiet confused actually we also have to display the result in venn just sayin

CodePudding user response：

so try this one

Codepen

Use a period , as delimiter between values <br><br>

<label>Set A</label>
<input type="text" id="myseta" value="1,2,3">
<label>Set B</label>
<input type="text" id="mysetb" value="2,3,5">
<label>Set C</label>
<input type="text" id="mysetc" value="9,2,7" >
<label>Result</label><span id="res"></span> <hr>
<button type="button" onclick="unionFunction()">Union</button>
<button type="button" onclick="intersectionFunction()">Intersection</button>
<button type="button" onclick="differenceFunction()">Complement</button>
<button type="button" onclick="complementFunction()">Difference</button>

the functions

function unionFunction(getarray = false) {
  // first we get the values
 var set1 = document.getElementById("myseta").value;
 var set2 = document.getElementById("mysetb").value;
 var set3 = document.getElementById("mysetc").value; 
  // then we can simply make a new Set
  let union = new Set()
  // we get 3 arrays of each set by 
  let arr1 = set1.split(',')
  let arr2 = set2.split(',')
  let arr3 = set3.split(',')
  
  // when we push same values in the set they won't work
  arr1.forEach((elem) => union.add(elem))
  arr2.forEach((elem) => union.add(elem))
  arr3.forEach((elem) => union.add(elem))
  
  // we print it
  if (getarray) {
    return Array.from(union);
  } else {
  document.getElementById("res").innerHTML =     Array.from(union).join(' , ');
}
}

function intersectionFunction(getarray = false) {
  // first we get the values
 var set1 = document.getElementById("myseta").value;
 var set2 = document.getElementById("mysetb").value;
 var set3 = document.getElementById("mysetc").value; 
  // we get 3 arrays of each set by 
  let arr1 = set1.split(',')
  let arr2 = set2.split(',')
  let arr3 = set3.split(',')
  
  /* this function will make a new array 
  intersection , based on filtering the arr1
  by checking if the value exist in array2 */

  let intersection = arr1.filter(value => arr2.includes(value));
  
  /* then we can find intersection between our 
  result and the arr3 */
  intersection = intersection.filter(value => arr3.includes(value));
  
  // we print it
  if (getarray) {
    return intersection
  } else {
  document.getElementById("res").innerHTML = intersection.toString();
  }
}


function differenceFunction() {
  // let do it a diffrent way :D , find the union
  let union = unionFunction(true)
  // then find the intersection
   let intersection = intersectionFunction(true)
  // then remove the union from intersection this will be teh diffrence
    let difference = union.filter(value => !intersection.includes(value));
   
  // we print it
  document.getElementById("res").innerHTML = difference.toString();
}

CodePudding user response：

Here is a solution for 'union' and 'intersection' based on your question and various comments you made. It's up to you to add 'difference' and 'complement':

function analyzeFunction(type) {
  let set1 = document.getElementById("mySetA").value.split(/[, ] /);
  let set2 = document.getElementById("mySetB").value.split(/[, ] /);
  let set3 = document.getElementById("mySetC").value.split(/[, ] /);
  let combined = set1.concat(set2).concat(set3);
  let result = 'FIXME';
  if(type === 'union') {
    result = Object.keys(combined.reduce((acc, val) => {
      acc[val] = true;
      return acc;
    }, {})).join(', ');
  } else if(type === 'intersection') {
    result = combined.reduce((acc, val) => {
      if(!acc[val]) {
        acc[val] = 0;
      }
      acc[val]  = 1;
      return acc;
    }, {});
    result = Object.keys(result).filter(val => result[val] >= 3).join(', ');
  } // etc for 'difference' and 'complement'
  console.log(result);
  document.getElementById("result").textContent = result;
}

<label>Set A:</label>
<input type="text" id="mySetA" value="1, 2, 3"/><br/>
<label>Set B:</label>
<input type="text" id="mySetB" value="3, 4, 5"/><br/>
<label>Set C:</label>
<input type="text" id="mySetC" value="3, 4, 6"/><br/>
<label>Result:</label>
<span id="result"></span>
<hr/>
<button type="button" onclick="analyzeFunction('union')">Union</button>
<button type="button" onclick="analyzeFunction('intersection')">Intersection</button>
<button type="button" onclick="analyzeFunction('difference')">Complement</button>
<button type="button" onclick="analyzeFunction('complement')">Difference</button>