Как эти две строки написать на чистом javascript?

138

29 мая 2021, 03:40

хочу переделать jQuery строкb на JS.

ПЕРВЫЙ ВОПРОС:

Есть такая функция:

//показываю содержимое корзины
function showMiniCart(){
    var out ='';
    for (var w in cart){
        out += w + ' --- '+cart[w]+'<br>';
    }
    out+='<br><a href="cart.html">Корзина</a>';
    $('#mini-cart').html(out);                          
}

Хотел перевети эту строку:

$('#mini-cart').html(out);

на сайте: http://youmightnotneedjquery.com/#matches_selector

есть перевод:

$(el).html(); на чистом js: el.innerHTML

Я попробовал перевести: document.getElementById("#mini-cart").innerHTML

Но в скобках у меня еще переменная out, которую я обьявил раньше в своем большом коде, я так понимаю в скобках то что выводится на страницу, но куда вложить "out"? Если после innerHTML нет скобок. Может так:

document.getElementById("#mini-cart").innerHTML="out";

праивльно?

ВТОРОЙ ВОПРОС:

function addToCart() {
var articul = $(this).attr('data-art'); 
///...здесь код условия if-else
localStorage.setItem('cart', JSON.stringify(cart) );
showMiniCart();
}

Хотел перевети эту строку:

var articul = $(this).attr('data-art');

на сайте: http://youmightnotneedjquery.com/#matches_selector

есть перевод:

$(el).attr('tabindex', 3); на чистом JS: el.setAttribute('tabindex', 3);

но у меня есть "this", его просто вписать вместо "el"? И нет второго аргумента(я не знаю что это за аргумент) , поэтому я не знаю как правильно переделать. Подскажите пожалуйста

Answer 1

function showMiniCart(){
  var out ='';
  for (var w in cart){
    out += w + ' --- ' + cart[w] + '<br>';
  }
  out+='<br><a href="cart.html">Корзина</a>';
  document.getElementById('mini-cart').innerHTML = out;
  // или document.querySelector('#mini-cart');                    
}

function addToCart() {
  var articul = this.getAttribute('data-art'); 
             // this.dataset.art;
  localStorage.setItem('cart', JSON.stringify(cart) );
  showMiniCart();
}

P.s.

• Эти создают / меняют атрибут (после написанного кода, у элемента будет data-bubu="100500")

jQ: $('#bubu').attr('data-bubu', 100500);

JS: document.querySelector('#bubu').setAttribute('data-bubu', 100500);

• А эти - получают значение этого атрибута (и, например, сохраняют в переменную):

jQ: var moo = $('#bubu').attr('data-bubu');

JS: var moo = document.querySelector('#bubu').getAttribute('data-bubu');

P.s.-2 можете где-то посмотреть про разницу attr() и prop()... и разницу атрибутов и свойств)