Как определить на какой класс нажимаем через getElementsByClassName JS

148

25 января 2019, 09:10

*{ 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
    font-family: "segoe ui light", sans-serif; 
    font-size: 1em; 
} 
body{ 
    background: url(../image/back.jpg); 
    background-size: cover; 
} 
#flex{ 
    display:flex; 
} 
#vybor{ 
    width: 35%; 
    height: 250px; 
    border: 1px solid black; 
    margin: 1.5%; 
    display: inline-block; 
    float:left; 
    font-size: 1.4em; 
    text-align: center; 
     
} 
#price{ 
   padding: 1%; 
    
    font-size: 1.8em; 
} 
.ingredients{ 
    width: 25%; 
    border-left: 1px solid black; 
    padding-left: 8%; 
    line-height: 1.5; 
     
     
} 
#pizza{  
    width: 300px; 
    height: 300px; 
    background-color: #2e5f0f;   
    border-radius: 50%; 
    overflow: hidden; 
    position: relative; 
    transform-origin: center; 
    margin-left:60%; 
 
    
} 
 
.one{ 
    width: 150px; 
    height: 150px; 
    background-image: url(../image/1.png); 
    position: absolute; 
    top: 0px; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
} 
 
.two{ 
    width: 150px; 
    height: 150px; 
    background-image: url(../image/2.png); 
    left: 150px; 
    top: 0px; 
    position: absolute; 
    border-bottom: 1px solid black; 
} 
.three{ 
    width: 150px; 
    height: 150px; 
    position: absolute; 
    top: 150px; 
    left: 0px; 
    background-image: url(../image/3.png); 
    border-right: 1px solid black; 
} 
.four{ 
    width: 150px; 
    height: 150px; 
    background-image: url(../image/4.png); 
    left: 150px; 
    top:150px; 
    position: absolute; 
}

<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles/style.css"> 
 
</head> 
 
<body> 
    
    <div id="pad"><div id="vybor"> 
    Выбранные элементы:  
    <ul id = "curElements"> 
      asdasd   
    </ul>    
    </div> 
    <div id = "pizza"> 
    <div class="inPizza one"></div> 
    <div class="inPizza two"></div> 
    <div class="inPizza three"></div> 
    <div class="inPizza four"></div></div> 
     
    <div id="price">Цена: <span>0</span> BYR</div> 
         
    </div> 
    <div id = "flex"> 
    <div class ="ingredients base"><h2>Основа для пиццы: </h2><br> 
    <input type="radio" class ="base" value="Чесночная"> Чесночная <br> 
    <input type="radio" class ="base" value="Томатная"> Томатная <br> 
    <input type="radio" class ="base" value="Барбекю"> Барбекю <br> 
    </div> 
    <div class ="ingredients"><h2>Мясная начинка:</h2><br> 
    <input type="checkbox" class="meat" value="Колбаски гриль" onclick="addCurElement()">Колбаски гриль<br> 
    <input type="checkbox" class="meat" value="Салями" onclick="addCurElement()">Салями<br> 
    <input type="checkbox" class="meat" value="Ветчина" onclick="addCurElement()">Ветчина<br> 
    <input type="checkbox" class="meat" value="Карбонат">Карбонат<br> 
    <input type="checkbox" class="meat" value="Бекон">Бекон<br> 
    <input type="checkbox" class="meat" value="Сервелат">Сервелат<br> 
    <input type="checkbox" class="meat" value="Курица<">Курица<br> 
    <input type="checkbox" class="meat" value="Телятина">Телятина<br> 
     
    </div> 
    <div class ="ingredients"><h2>Морская начинка:</h2><br> 
    <input type="checkbox" class="fish" value="Креветки">Креветки<br> 
    <input type="checkbox" class="fish" value="Лосось">Лосось<br> 
    <input type="checkbox" class="fish" value="Мидии">Мидии<br> 
    <input type="checkbox" class="fish" value="Кальмар">Кальмар<br> 
    <input type="checkbox" class="fish" value="Крабовое мясо">Крабовое мясо<br> 
    <input type="checkbox" class="fish" value="Тунец">Тунец<br> 
    </div> 
    <div class ="ingredients"><h2>Соус:</h2><br> 
    <input type="checkbox" class="sauce" value="Кисло-сладкий">Кисло-сладкий<br> 
    <input type="checkbox" class="sauce" value="Барбекю">Барбекю<br> 
    <input type="checkbox" class="sauce" value="Чесночный">Чесночный<br> 
    <input type="checkbox" class="sauce" value="Карри">Карри<br> 
    <input type="checkbox" class="sauce" value="Терияки">Терияки<br> 
    </div>  
    </div> 
    <script src="scripts/script.js"> 
    </script> 
</body> 
</html>

Есть такой html

<input type="checkbox" class="meet" value="Колбаски гриль" onclick="addCurElement()">Колбаски гриль<br>
    <input type="checkbox" class="meet" value="Салями" onclick="addCurElement()">Салями<br>
    <input type="checkbox" class="meet" value="Ветчина" onclick="addCurElement()">Ветчина<br>

Нужно при нажатии на какой-то из этих инпутов, чтобы функция или сборщик собирала значение этой кнопки( то есть value) и передавало в элемент списка выше по разметке. То есть при нажатии например "Колбасок гриль", это значение передавалось методу который запишет это в список как элемент списка. Нужно на чистом Javascript.

function addCurElement(){ 
  var newli = document.createElement('li'); 
  var addElem = document.getElementsByClassName("meet"); 
  var add = document.createTextNode(addElem); 
  newli.appendChild(add);
  document.getElementById("curElements").appendChild(newli); 
}

Answer 1

На JavaScript

Файл: myscript.js

function myFunction(el){   
  var textarea = document.getElementById("list");   
    
   
  Element.prototype.remove = function() { 
      this.parentElement.removeChild(this); 
  } 
  NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { 
      for(var i = this.length - 1; i >= 0; i--) { 
          if(this[i] && this[i].parentElement) { 
              this[i].parentElement.removeChild(this[i]); 
          } 
      } 
  } 
   
  var  html = "\n" + "<li id='"+el.value+"'>"+el.value+"</li>" 
  if (el.checked == true){  
   
    textarea.innerHTML +=  html;  
     
  }else{    
      document.body.querySelectorAll('[id="'+el.value+'"]')[0].remove();  
  } 
    
}

textarea{ 
  width:100%; 
  max-width: 100px; 
  min-height: 100px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
 
 
<div id="list"></div> 
 
<ul class="click"> 
  <input type="checkbox" name="product1" onclick="myFunction(this)" value="Колбаса">Колбаса<br> 
  <input type="checkbox" name="product2" onclick="myFunction(this)" value="Сыр">Сыр<br> 
  <input type="checkbox" name="product3" onclick="myFunction(this)" value="Лапша">Лапша<br> 
</ul> 
 
  
</body> 
</html>

Update 0.0.1

function myFunction(el){   
  var textarea = document.getElementById("curElements");   
    
   
  Element.prototype.remove = function() { 
      this.parentElement.removeChild(this); 
  } 
  NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { 
      for(var i = this.length - 1; i >= 0; i--) { 
          if(this[i] && this[i].parentElement) { 
              this[i].parentElement.removeChild(this[i]); 
          } 
      } 
  } 
   
  var  html = "\n" + "<li id='"+el.value+"'>"+el.value+"</li>" 
  if (el.checked == true){  
   
    textarea.innerHTML +=  html;  
     
  }else{    
      document.body.querySelectorAll('[id="'+el.value+'"]')[0].remove();  
  } 
    
}

*{ 
        box-sizing: border-box; 
        padding: 0; 
        margin: 0; 
        font-family: "segoe ui light", sans-serif; 
        font-size: 1em; 
    } 
    body{ 
        background: url(../image/back.jpg); 
        background-size: cover; 
    } 
    #flex{ 
        display:flex; 
    } 
    #vybor{ 
        width: 35%; 
        height: 250px; 
        border: 1px solid black; 
        margin: 1.5%; 
        display: inline-block; 
        float:left; 
        font-size: 1.4em; 
        text-align: center; 
         
    } 
    #price{ 
       padding: 1%; 
        
        font-size: 1.8em; 
    } 
    .ingredients{ 
        width: 25%; 
        border-left: 1px solid black; 
        padding-left: 8%; 
        line-height: 1.5; 
         
         
    } 
    #pizza{  
        width: 300px; 
        height: 300px; 
        background-color: #2e5f0f;   
        border-radius: 50%; 
        overflow: hidden; 
        position: relative; 
        transform-origin: center; 
        margin-left:60%; 
 
        
    } 
 
    .one{ 
        width: 150px; 
        height: 150px; 
        background-image: url(../image/1.png); 
        position: absolute; 
        top: 0px; 
        border-right: 1px solid black; 
        border-bottom: 1px solid black; 
    } 
 
    .two{ 
        width: 150px; 
        height: 150px; 
        background-image: url(../image/2.png); 
        left: 150px; 
        top: 0px; 
        position: absolute; 
        border-bottom: 1px solid black; 
    } 
    .three{ 
        width: 150px; 
        height: 150px; 
        position: absolute; 
        top: 150px; 
        left: 0px; 
        background-image: url(../image/3.png); 
        border-right: 1px solid black; 
    } 
    .four{ 
        width: 150px; 
        height: 150px; 
        background-image: url(../image/4.png); 
        left: 150px; 
        top:150px; 
        position: absolute; 
    }

  
 
 <!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles/style.css"> 
 
</head> 
 
<body> 
    
    <div id="pad"><div id="vybor"> 
    Выбранные элементы:  
    <ul id = "curElements"> 
      asdasd   
    </ul>    
    </div> 
    <div id = "pizza"> 
    <div class="inPizza one"></div> 
    <div class="inPizza two"></div> 
    <div class="inPizza three"></div> 
    <div class="inPizza four"></div></div> 
     
    <div id="price">Цена: <span>0</span> BYR</div> 
         
    </div> 
    <div id = "flex"> 
    <div class ="ingredients base"><h2>Основа для пиццы: </h2><br> 
    <input type="radio" class ="base" value="Чесночная"> Чесночная <br> 
    <input type="radio" class ="base" value="Томатная"> Томатная <br> 
    <input type="radio" class ="base" value="Барбекю"> Барбекю <br> 
    </div> 
    <div class ="ingredients"><h2>Мясная начинка:</h2><br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Колбаски гриль" onclick="addCurElement()">Колбаски гриль<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Салями" onclick="addCurElement()">Салями<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Ветчина" onclick="addCurElement()">Ветчина<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Карбонат">Карбонат<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Бекон">Бекон<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Сервелат">Сервелат<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Курица<">Курица<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="meat" value="Телятина">Телятина<br> 
     
    </div> 
    <div class ="ingredients"><h2>Морская начинка:</h2><br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Креветки">Креветки<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Лосось">Лосось<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Мидии">Мидии<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Кальмар">Кальмар<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Крабовое мясо">Крабовое мясо<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="fish" value="Тунец">Тунец<br> 
    </div> 
    <div class ="ingredients"><h2>Соус:</h2><br> 
    <input type="checkbox" onclick="myFunction(this)"  class="sauce" value="Кисло-сладкий">Кисло-сладкий<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="sauce" value="Барбекю">Барбекю<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="sauce" value="Чесночный">Чесночный<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="sauce" value="Карри">Карри<br> 
    <input type="checkbox" onclick="myFunction(this)"  class="sauce" value="Терияки">Терияки<br> 
    </div>  
    </div> 
    <script src="scripts/script.js"> 
    </script> 
</body> 
</html>