Hello so today I was curios how would I code smarter and shorter. here is litle project I did like 2 weeks ago:
// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);
function filterNames(){
// Get value of input
let filterValue = document.getElementById('filterInput').value.toUpperCase();
// Get names ul
let ul = document.getElementById('names');
// Get lis from ul
let li = ul.querySelectorAll('li.collection-item');
// Loop through collection-item lis
for(let i = 0;i < li.length;i++){
let a = li[i].getElementsByTagName('a')[0];
// If matched
if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
function do1(){
var input = document.getElementById('ipt1').value;
var a = document.createElement('a');
a.setAttribute('href', '#');
a.textContent = input;
var li = document.createElement('li');
li.setAttribute('class', 'collection-item');
a.onclick=function(){
var div = this.parentElement;
div.style.display = "none";
}
var div = document.getElementById('div1');
li.appendChild(a);
div1.appendChild(li)
if(input===""){
alert('please fill in information');
return false;
}
}
function do2(){
var input = document.getElementById('ipt2').value;
var a = document.createElement('a');
a.setAttribute('href', '#');
a.textContent = input;
var li = document.createElement('li');
li.setAttribute('class', 'collection-item');
a.onclick=function(){
var div = this.parentElement;
div.style.display = "none";
}
var div = document.getElementById('div2');
li.appendChild(a);
div2.appendChild(li);
}
function do3(){
var input = document.getElementById('ipt3').value;
var a = document.createElement('a');
a.setAttribute('href', '#');
a.textContent = input;
var li = document.createElement('li');
li.setAttribute('class', 'collection-item');
a.onclick=function(){
var div = this.parentElement;
div.style.display = "none";
}
var div = document.getElementById('div3');
li.appendChild(a);
div3.appendChild(li);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<title>My Contacts</title>
</head>
<div class="container">
<h1 class="center-align">
My Contacts
</h1>
<input type="text" id="filterInput" placeholder="Search names...">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>A</h5> <input class="ipt" type="box" id="ipt1"><button onclick="do1();">click me to add another name</button>
</li>
<div id="div1">
</div>
<li class="collection-header">
<h5>B</h5> <input class="ipt" type="box" id="ipt2"><button onclick="do2();"> click me to add another name</button>
</li>
<div id="div2">
</div>
<li class="collection-header">
<h5>C</h5> <input class="ipt" type="box" id="ipt3"><button onclick="do3();"> click me to add another name</button>
</li>
<div id="div3">
</div>
</ul>
</div>So as you can see there are 3 functions that are literally same but just have diffrent id's and that kind of stuff. How do I shorten these 3 function is there any way? I searched little bit about prototype, because I've heard that prototypes have something to do with shortening code and making it easier to understand and much more shorter. So if you have any ideas please leave a comment I would appreaciate it. And one more question: should I start learning javascript OOP. I don't really know if it's important to learn or not?
最佳答案
创建一个函数并接受一些参数:
function doTheThing(idA, idB){
var input = document.getElementById(idA).value;
var a = document.createElement('a');
a.setAttribute('href', '#');
a.textContent = input;
var li = document.createElement('li');
li.setAttribute('class', 'collection-item');
a.onclick=function(){
var div = this.parentElement;
div.style.display = "none";
}
var div = document.getElementById(idB);
li.appendChild(a);
div.appendChild(li);
}
此外，您的变量 div1、div2 和 div3 未定义，它们是您正在使用的 ID。如上所示，使用 var div 调用它们。
关于javascript - 如何缩短这 3 个非常相似的函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51005964/