Здравствуйте, я хочу сделать рейтинг в виде звезд на своем сайте. Сам рейтинг я уже сделала, но сохранить его я не могу.
Вот что я уже сделала:
Страница на которой находиться рейтинг:
@page
@model MyWebSite.Pages.Company.DetailsModel
@{
ViewData["Title"] = "Details";
}
@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer
<link rel="stylesheet" href="/css/rating.css">
<div class="container-fluid">
<div class="container">
<div class="container">
<div class="row">
<div class="col">
<h1>@Localizer["Details"]</h1>
<div>
<h4>@Localizer["Company"]</h4>
//сам рейтинг:
<div class="rating-area">
<input type="radio" id="star-5" name="rating" value="5">
<label for="star-5" title="Оценка «5»"></label>
<input type="radio" id="star-4" name="rating" value="4">
<label for="star-4" title="Оценка «4»"></label>
<input type="radio" id="star-3" name="rating" value="3">
<label for="star-3" title="Оценка «3»"></label>
<input type="radio" id="star-2" name="rating" value="2">
<label for="star-2" title="Оценка «2»"></label>
<input type="radio" id="star-1" name="rating" value="1">
<label for="star-1" title="Оценка «1»"></label>
</div>
<hr />
<dl class="row">
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Title)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Title)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Rank)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Rank)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.EnrollmentDate)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.EnrollmentDate)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Thematics)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Thematics)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Bonus)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Bonus)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Description)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Description)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Images)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Images)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Video)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Video)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Topic)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Topic)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.News)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.News)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Price)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Price)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Tags)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Company.Tags)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Company.Owner)
</dt>
</dl>
</div>
<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="NMUMHG7VQM4FL" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_BY/i/scr/pixel.gif" width="1" height="1" />
</form>
<div>
<a asp-page="./Edit" asp-route-id="@Model.Company.ID">@Localizer["Edit"]</a> |
<a asp-page="./Index">@Localizer["Back to List"]</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/css/rating.css"></script>
Пытаюсь сохранить рейтинг:
const link = document.getElementById('star-1-link');
const link = document.getElementById('star-2-link');
const link = document.getElementById('star-3-link');
const link = document.getElementById('star-4-link');
const link = document.getElementById('star-5-link');
const lightRating = '/css/rating.css';
let currentRating = localStorage.getItem('rating');
(function(){
if( !currentRating ) {
currentRating = lightRating;
localStorage.setItem('rating', currentRating);
}
link.setAttribute('href', currentRating);
})();
document.getElementById('star-1').addEventListener('click', e => {
e.preventDefault();
if( currentRating == lightRating ) {
currentRating = lightRating;
}
link.setAttribute('href', currentRating);
localStorage.setItem('rating', currentRating);
});
document.getElementById('star-2').addEventListener('click', e => {
e.preventDefault();
if( currentRating == lightRating ) {
currentRating = lightRating;
}
link.setAttribute('href', currentRating);
localStorage.setItem('rating', currentRating);
});
document.getElementById('star-3').addEventListener('click', e => {
e.preventDefault();
if( currentRating == lightRating ) {
currentRating = lightRating;
}
link.setAttribute('href', currentRating);
localStorage.setItem('rating', currentRating);
});
document.getElementById('star-4').addEventListener('click', e => {
e.preventDefault();
if( currentRating == lightRating ) {
currentRating = lightRating;
}
link.setAttribute('href', currentRating);
localStorage.setItem('rating', currentRating);
});
document.getElementById('star-5').addEventListener('click', e => {
e.preventDefault();
if( currentRating == lightRating ) {
currentRating = lightRating;
}
link.setAttribute('href', currentRating);
localStorage.setItem('rating', currentRating);
});
Ориентировалась вот на этот учебник -
https://snipp.ru/html-css/rating-css. Что я делаю не так? Заранее спасибо
