Address Book form with HTML and JS - when clicking i want my addBtn to display the name, number and socialmedia

Question

What i'm trying to do is to display the name, number and socialmedia of my array at the click of the add Button. Then to remove that same name, number and social media at the same time and then when clicking to also search that name, number and social media. I would be okay just for you to help me with the add button. I don't understand what's wrong with my code. Thank you in advance

    let addBtn = document.querySelector('#addBtn'); 
    let removeBtn = document.querySelector('#removeBtn'); 
    let searchBtn = document.querySelector("#searchBtn");


    let contacts = []; 

    function Contact (name, number, socialmedia) {
        this.name = name;
        this.number = number;
        this.socialmedia = socialmedia;
    }
    
    function createContacts(contactsLength) {
        let arrName = ['', '', '']
        let arrNumber = ['', '', '']
        let arrMedia = ['', '', '']

for(let i=0; i





    
    
    
    Document

    



    

My Address Book 


    
    
    
    
  


    
      
        Name
        Number
        Social Media

user_1762224 · Answer

Here is some rudimentary functionality. It is difficult to remove without selecting, so I removed all matches.

const $tableBody = $('#myTable tbody');
const $input = $('#myInput');
const $addBtn = $('#addBtn');
const $removeBtn = $('#removeBtn');
const $searchBtn = $("#searchBtn");

const contacts = [];

function Contact(name, number, socialmedia) {
  this.name = name;
  this.number = number;
  this.socialmedia = socialmedia;
}

function renderContacts(searchName) {
  $tableBody.empty()
    .append(contacts
      .filter(({ name }) => !searchName || (name === searchName))
      .map(({ name, number, socialmedia }) =>
        $('')
          .append($('').text(name))
          .append($('').text(number))
          .append($('').text(socialmedia))));
}

function addContact(name, number, media) {
  contacts.push(new Contact(name, number, media));
}

function removeContacts(name) {
  for (let i = contacts.length - 1; i >= 0; i--) {
    if (contacts[i].name === name) {
      contacts.splice(i, 1);
    }
  }
}

function createContacts(contactsLength) {
  let arrName = ['Bob', 'Jim', 'Ted']
  let arrNumber = ['21', '42', '84']
  let arrMedia = ['Facebook', 'Snapchat', 'Twitter']

  for (let i = 0; i < contactsLength; i++) {
    let name = arrName[Math.floor(Math.random() * arrName.length)]
    let number = arrNumber[Math.floor(Math.random() * arrNumber.length)]
    let socialmedia = arrMedia[Math.floor(Math.random() * arrMedia.length)]

    addContact(name, number, socialmedia);
  }
}

function onAddContact(e) {
  addContact($input.val(), 0, 'UNKNOWN');
  $input.val('');
  renderContacts();
}

function onRemoveContacts(e) {
  removeContacts($input.val(), 0, 'UNKNOWN');
  $input.val('');
  renderContacts();
}

function onSearchContacts(e) {
  renderContacts($input.val());
}

createContacts(10);
renderContacts();

$addBtn.on('click', onAddContact);
$removeBtn.on('click', onRemoveContacts);
$searchBtn.on('click', onSearchContacts);







  
    My Address Book
    

      
      
      
      
    

    
      
        
          Name
          Number
          Social Media

user_5623773 · Answer

Code snippet for the addition of content.

let addBtn = document.querySelector("#addBtn");
let removeBtn = document.querySelector("#removeBtn");
let searchBtn = document.querySelector("#searchBtn");

let contacts = [];

function Contact(_name, number, socialmedia) {
  this._name = _name;
  this.number = number;
  this.socialmedia = socialmedia;
}

function createContacts(contactsLength) {
  let arrName = ["name1", "name2", "name3"];
  let arrNumber = ["array1", "array2", "array3"];
  let arrMedia = ["arrayMedia1", "arrayMedia2", "arrayMedia3"];

  for (let i = 0; i < contactsLength; i++) {
    let name = arrName[Math.floor(Math.random() * arrName.length)];
    let number = arrNumber[Math.floor(Math.random() * arrNumber.length)];
    let socialmedia = arrMedia[Math.floor(Math.random() * arrMedia.length)];

    contacts.push(new Contact(name, number, socialmedia));
  }
}
createContacts(10);
console.log(contacts);

addBtn.addEventListener("click", addContact);

function addContact() {
  for (const list of contacts) {
    ({ _name, number, socialmedia } = list);
    $("#tableBody").append(
      "" + _name + "" + number + "" + socialmedia + ""
    );
  }
}





    
    
    
    Document
    
    





    
        My Address Book
        

            
            
            
            
        

        
            
                
                    Name
                    Number
                    Social Media

Address Book form with HTML and JS - when clicking i want my addBtn to display the name, number and socialmedia

2 Answers