Смена цвета div с помощью javascript

Question

Помогите пожалуйста упростить функцию, можно ли использовать лишь одну функцию? Спасибо заранее.

		function svisa(){
				document.getElementById('visa').style.border=".2vw solid red";
				document.getElementById('qiwi').style.border=".2vw solid grey";
				document.getElementById('mastercard').style.border=".2vw solid grey";
				document.getElementById('webmoney').style.border=".2vw solid grey";
				document.getElementById('yandex').style.border=".2vw solid grey";
		}
		function sqiwi(){
				document.getElementById('visa').style.border=".2vw solid grey";
				document.getElementById('qiwi').style.border=".2vw solid red";
				document.getElementById('mastercard').style.border=".2vw solid grey";
				document.getElementById('webmoney').style.border=".2vw solid grey";
				document.getElementById('yandex').style.border=".2vw solid grey";
		}
		function smastercard(){
				document.getElementById('visa').style.border=".2vw solid grey";
				document.getElementById('qiwi').style.border=".2vw solid grey";
				document.getElementById('mastercard').style.border=".2vw solid red";
				document.getElementById('webmoney').style.border=".2vw solid grey";
				document.getElementById('yandex').style.border=".2vw solid grey";
		}
		function swebmoney(){
				document.getElementById('visa').style.border=".2vw solid grey";
				document.getElementById('qiwi').style.border=".2vw solid grey";
				document.getElementById('mastercard').style.border=".2vw solid grey";
				document.getElementById('webmoney').style.border=".2vw solid red";
				document.getElementById('yandex').style.border=".2vw solid grey";
		}
		function syandex(){
				document.getElementById('visa').style.border=".2vw solid grey";
				document.getElementById('qiwi').style.border=".2vw solid grey";
				document.getElementById('mastercard').style.border=".2vw solid grey";
				document.getElementById('webmoney').style.border=".2vw solid grey";
				document.getElementById('yandex').style.border=".2vw solid red";
		}

*{
	margin: 0;
	padding: 0;
}

.container{
	width: 80%;
	height: 45vw;	
	margin: 0 auto;
	border: .4vw solid grey;
	border-radius: 24px;
	overflow: hidden;
}

.block_left{
	width: 40%;
	height: 100%;
	float: left;
}

.block_product{
	width: 100%;
	height: 100%;
	text-align: center;
}

span{
	font-size: 2vw;
	font-family: 'Acme', sans-serif;
	display: block;
}

.block_right{
	width: 60%;
	height: 100%;
	float: right;
}

.block_select{
	width: 100%;
	height: 30%;
	text-align: center;
}

.method{
	height: 25%;
	width: 15%;
	border: .2vw solid grey;
	border-radius: 6px;
	display: inline-block;
	background-position: center;
	background-size: cover;
}

.visa{
	background-image: url('image/visa.png');
}

.qiwi{
	background-image: url('image/qiwi.png');
}

.mastercard{
	background-image: url('image/mastercard.png');
}

.webmoney{
	background-image: url('image/webmoney.png');
}

.yandex{
	background-image: url('image/yandex.png');
}

.block_info{
	width: 100%;
	height: 40%;
}

.block_confirm{
	width: 100%;
	height: 30%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="UTF-8">
	<title>Pay</title>
</head>
<body>
	<div class="container">
		<div class="block_left">
			<div class="block_product">
				<span class="product">Выбранные продукты</span>

			</div>
		</div>
		<div class="block_right">	
			<div class="block_select">
				<span class="seletc">Выберете метод оплаты</span>
				<div class="method visa" onclick="svisa()" id="visa">
					
				</div>
				<div class="method qiwi" onclick="sqiwi()" id="qiwi">
					
				</div>
				<div class="method mastercard" onclick="smastercard()" id="mastercard">
					
				</div>
				<div class="method webmoney" onclick="swebmoney()" id="webmoney">
					
				</div>
				<div class="method yandex" onclick="syandex()" id="yandex">
					
				</div>
			</div>
			<div class="block_info">
						
			</div>
			<div class="block_confirm">

			</div>
		</div>
	</div>
</body>
</html>

Answer 1

В приведенном примере чуть старенький код, чтобы у вас на странице ничего вдруг не сломалось.

Полезные ссылки:
• http://learn.javascript.ru/
• https://developer.mozilla.org/ru/

(function(){
  var methods = document.querySelectorAll('.block_select .method');
  // Возвращает список всех элементов с классом `method`, внутри блока `block_select`
  
  for( var i = 0; i < methods.length; i++ ) {
    // Список можно перебрать и на каждый элемент повесить обработчик клика
    setBorderToggler(i);
  }
  
  function setBorderToggler(i) {
    methods[i].addEventListener('click', function() {
      var active = document.querySelector('.block_select .method.active');
      // Первый элемент с активным классом...
      // Если он есть - удалить у него этот класс
      if( active ) active.classList.remove('active');
      
      // Добавить его на текущий кликнутый элемент    
      this.classList.add('active');
    });
  }
})();

.block_select .method {
  display: inline-block;
  width: 80px;
  height: 30px;
  border: 1px solid grey;
}

.block_select .method.active {
  border-color: red;
}

<div class="block_right">
  <div class="block_select">
    <div class="method visa"></div>
    <div class="method qiwi"></div>
    <div class="method mastercard"></div>
    <div class="method webmoney"></div>
    <div class="method yandex"></div>
  </div>
</div>

Это работает, потому что в CSS приоритет получает (при прочих равных) селектор, который размещен ниже в коде.

Answer 2

    function sel(val){
        let param = val.className;
        val.style.border=".2vw solid red";
        let parent = document.getElementsByClassName('block_select');
        let chiledsDiv= parent[0].getElementsByTagName('div');
        for(let i=0;i<chiledsDiv.length;i++){
            if(chiledsDiv[i].className != param) {
                chiledsDiv[i].style.border = ".2vw solid grey";
            }
        }
    }

    *{
        margin: 0;
        padding: 0;
    }

    .container{
        width: 80%;
        height: 45vw;
        margin: 0 auto;
        border: .4vw solid grey;
        border-radius: 24px;
        overflow: hidden;
    }

    .block_left{
        width: 40%;
        height: 100%;
        float: left;
    }

    .block_product{
        width: 100%;
        height: 100%;
        text-align: center;
    }

    span{
        font-size: 2vw;
        font-family: 'Acme', sans-serif;
        display: block;
    }

    .block_right{
        width: 60%;
        height: 100%;
        float: right;
    }

    .block_select{
        width: 100%;
        height: 30%;
        text-align: center;
    }

    .method{
        height: 25%;
        width: 15%;
        border: .2vw solid grey;
        border-radius: 6px;
        display: inline-block;
        background-position: center;
        background-size: cover;
    }

    .visa{
        background-image: url('image/visa.png');
    }

    .qiwi{
        background-image: url('image/qiwi.png');
    }

    .mastercard{
        background-image: url('image/mastercard.png');
    }

    .webmoney{
        background-image: url('image/webmoney.png');
    }

    .yandex{
        background-image: url('image/yandex.png');
    }

    .block_info{
        width: 100%;
        height: 40%;
    }

    .block_confirm{
        width: 100%;
        height: 30%;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>Pay</title>
</head>
<body>
<div class="container">
    <div class="block_left">
        <div class="block_product">
            <span class="product">Выбранные продукты</span>

        </div>
    </div>
    <div class="block_right">
        <div class="block_select">
            <span class="seletc">Выберете метод оплаты</span>
            <div class="method visa" onclick="sel(this)" id="visa">

            </div>
            <div class="method qiwi" onclick="sel(this)" id="qiwi">

            </div>
            <div class="method mastercard" onclick="sel(this)" id="mastercard">

            </div>
            <div class="method webmoney" onclick="sel(this)" id="webmoney">

            </div>
            <div class="method yandex" onclick="sel(this)" id="yandex">

            </div>
        </div>
        <div class="block_info">

        </div>
        <div class="block_confirm">

        </div>
    </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Смена цвета div с помощью javascript

Ответы (2 шт):