I have been fiddling around with a project and can’t seem to find a solution…it could be the lack of sleep, or I could just be missing something completely obvious.
The key here is I am currently changing the style of an ID…not a class. That ID is applied to the first link in the @foreach chain, but since it is an ID and not a Class, it is not applying the style to all items listed in @foreach (just the first).
Not sure if posting code here will be helpful since it is based on the tables I have in my DB, but maybe someone out there can lend a helping hand regardless.
The problem is in @foreach and the last two functions under the <script> tag.
@extends('layouts.app')
@section('content')
<style>
.link-window {
zoom:70%; }
.phone-width {
border-radius:10px; }
.form-control {
height:30px;
padding:0!important;
border:none!important;
border-radius:0!important;
display:inline-block; }
.form-group label {
float:center; }
@media (max-width:768px) {
.phone-width {
width:calc(100% - 24px);
margin-top:20px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-12 card p-3">
<h2 class="card-title">User Settings</h2>
<form action="/dashboard/settings" method="post">
<div class="row">
<div class="col-12 col-md-5">
<div class="form-group">
<label for="page_bg_color">Page Background Color</label>
<input type="color" id="page_bg_color" name="page_bg_color" class="form-control{{ $errors->first('page_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_bg_color }}">
@if($errors->first('page_bg_color'))
<div class="invalid-feedback">{{ $errors->first('page_bg_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="page_text_color">Page Text Color</label>
<input type="color" id="page_text_color" name="page_text_color" class="form-control{{ $errors->first('page_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->page_text_color }}">
@if($errors->first('page_text_color'))
<div class="invalid-feedback">{{ $errors->first('page_text_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="link_bg_color">Link Background Color</label>
<input type="color" id="link_bg_color" name="link_bg_color" class="form-control{{ $errors->first('link_bg_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_bg_color }}">
@if($errors->first('link_bg_color'))
<div class="invalid-feedback">{{ $errors->first('link_bg_color') }}</div>
@endif
</div>
<div class="form-group">
<label for="link_text_color">Link Text Color</label>
<input type="color" id="link_text_color" name="link_text_color" class="form-control{{ $errors->first('link_text_color') ? ' is-invalid' : '' }}" placeholder="#000000" value="{{ $user->link_text_color }}">
@if($errors->first('link_text_color'))
<div class="invalid-feedback">{{ $errors->first('link_text_color') }}</div>
@endif
</div>
<div class="col-12">
@csrf
<button type="submit" class="btn btn-primary mt-3{{ session('success') ? ' is-valid' : '' }}">Save Settings</button>
@if(session('success'))
<div class="valid-feedback">{{ session('success') }}</div>
@endif
</div>
</div>
<div id="page-bg-color" class="col-12 col-md-6 mx-auto phone-width" style="background-color:{{ $user["page_bg_color"] }};">
<div class="link-window py-5">
<div class="row">
<div class="main-content text-center py-3">
<h2 class="fw-bold">{{ $user["main_name"] }}</h2>
<p>Description Text</p>
</div>
</div>
<div class="row">
@foreach($user["links"] as $link)
<div class="link">
{{-- What I am styling --}}
<p
id="link-colors"
class="user-link d-block p-3 mb-3 mx-4 h5 text-center"
target="_blank"
rel="nofollow"
style="border-radius:10px;background-color:{{ $user["link_bg_color"] }};color:{{ $user["link_text_color"] }};"
>{{ $link["name"] }}</p>
</div>
@endforeach
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
document.getElementById("page_bg_color").addEventListener("input", function() {
document.getElementById("page-bg-color").style.backgroundColor = this.value;
});
document.getElementById("page_text_color").addEventListener("input", function() {
document.getElementById("page-text-color").style.color = this.value;
});
// Styling Controller (background-color)
document.getElementById("link_bg_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("background-color", this.value, "important");
});
// Styling Controller (color)
document.getElementById("link_text_color").addEventListener("input", function() {
document.getElementById("link-colors").style.setProperty("color", this.value, "important");
});
</script>
@endsection
I’ve tried using .getElementByClassName and it didn’t work.
2
Answers
In your foreach loop it looks like it is using the SAME id for every paragraph in that loop. You can’t reuse IDs. in javascript, you can use querySelector and it will refer to the FIRST matching element.
In my answer, I added a new class called links to the parent of your foreach. Then user querySelector to refer to the FIRST link under links.
Can you try using a for loop after
document.getElementByClassName?Like this: