Is there a way to change the style of a class under a @foreach tag using JavaScript?-CodePudding

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 >
    <div >
        <div >
            <h2 >User Settings</h2>
            <form action="/dashboard/settings" method="post">
                <div >
                    <div >

                        <div >
                            <label for="page_bg_color">Page Background Color</label>
                            <input type="color" id="page_bg_color" name="page_bg_color"  placeholder="#000000" value="{{ $user->page_bg_color }}">
                            @if($errors->first('page_bg_color'))
                                <div >{{ $errors->first('page_bg_color') }}</div>
                            @endif
                        </div>

                        <div >
                            <label for="page_text_color">Page Text Color</label>
                            <input type="color" id="page_text_color" name="page_text_color"  placeholder="#000000" value="{{ $user->page_text_color }}">
                            @if($errors->first('page_text_color'))
                                <div >{{ $errors->first('page_text_color') }}</div>
                            @endif
                        </div>

                        <div >
                            <label for="link_bg_color">Link Background Color</label>
                            <input type="color" id="link_bg_color" name="link_bg_color"  placeholder="#000000" value="{{ $user->link_bg_color }}">
                            @if($errors->first('link_bg_color'))
                                <div >{{ $errors->first('link_bg_color') }}</div>
                            @endif
                        </div>

                        <div >
                            <label for="link_text_color">Link Text Color</label>
                            <input type="color" id="link_text_color" name="link_text_color"  placeholder="#000000" value="{{ $user->link_text_color }}">
                            @if($errors->first('link_text_color'))
                                <div >{{ $errors->first('link_text_color') }}</div>
                            @endif
                        </div>
                        <div >
                            @csrf
                            <button type="submit" >Save Settings</button>
                            @if(session('success'))
                                <div >{{ session('success') }}</div>
                            @endif
                        </div>
                    </div>

                    <div id="page-bg-color"  style="background-color:{{ $user["page_bg_color"] }};">
                        <div >
                            <div >
                                <div >
                                    <h2 >{{ $user["main_name"] }}</h2>
                                    <p>Description Text</p>
                                </div>
                            </div>
                            <div >
                                @foreach($user["links"] as $link)
                                    <div >
{{-- What I am styling --}}
                                        <p
                                            id="link-colors"
                                            
                                            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.

CodePudding user response：

Can you try using a for loop after document.getElementByClassName?

Like this:

<script>
    const elements = document.getElementsByClassName('text');
    for(const i in elements) {
    elements[i].style.color='red';
}
</script>

CodePudding user response：

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.

let firstLink = document.querySelector(".links .link p");


document.querySelector("#link_text_color").addEventListener("input", (e) => {
  firstLink.style.setProperty("color", e.target.value, "important");
})

.link p {
  padding: 10px;
}

<input id="link_text_color">
<div >
  <div >
    <p  target="_blank" rel="nofollow" style="border-radius:10px;background-color:red;color:white">name</p>
  </div>

  <div >
    <p  target="_blank" rel="nofollow" style="border-radius:10px;background-color:gray;color:black">name 2</p>
  </div>
</div>