Change the text when pressing on another place

Question

I don't know what is wrong with my code. I have two elements with an id, and when I click on the corresponding place, the ids are not changed as expected. I have tried to give them values directly as "aaa" or "bbb" to see if it changes it for that, but neither.

I call the js file from the head.

<script src="js/parallax.js"></script>

The html code is as follows:

<div id="destacado-1">
            <h2 id="slider-text-1">Slider de texto</h2>
            <p id="slider-text-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.</p>
            <div class="botones-slider-text">
                <span onclick="sliderOn(0)" href=""><i class="fas fa-circle"></i></span>
                <span onclick="sliderOn(1)" href=""><i class="fas fa-circle"></i></span>
                <span onclick="sliderOn(2)" href=""><i class="fas fa-circle"></i></span>
                <span onclick="sliderOn(3)" href=""><i class="fas fa-circle"></i></span>
            </div>
        </div>

and my js file is as follows

var sliderText1 = ["Slider titulo uno","Slider titulo dos","Slider titulo tres","Slider titulo cuatro"];
var sliderText2 = [
    "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Ipsum lorem dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Dolor imput lorem sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Sit Lorem, ipsum dolor amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit."
    ];

    function sliderOn(numero) {
        document.getElementsByid("slider-text-1").innerHTML = sliderText1[numero];
        document.getElementById("slider-text-2").innerHTML = sliderText2[numero];
    }

I have tried changing the span to p or to a button but it still does not work.

There is no method called `getElementsByid`. Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Feb 14 '21 at 20:11
Use [event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple events — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). See [the tag info](https://stackoverflow.com/tags/event-delegation/info) and [What is DOM Event delegation?](https://stackoverflow.com/q/1687296/4642212). — Sebastian Simon, Feb 14 '21 at 20:11
I do it this way because I don't know how to do it any other way. — Rodrypaladin, Feb 14 '21 at 20:19

score 0 · Answer 1 · answered Feb 14 '21 at 20:13

You just spell getElementById wrong.

var sliderText1 = ["Slider titulo uno","Slider titulo dos","Slider titulo tres","Slider titulo cuatro"];
var sliderText2 = [
    "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Ipsum lorem dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Dolor imput lorem sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.",
    "Sit Lorem, ipsum dolor amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit."
    ];

    function sliderOn(numero) {
        document.getElementById("slider-text-1").innerHTML = sliderText1[numero];
        document.getElementById("slider-text-2").innerHTML = sliderText2[numero];
    }

<div id="destacado-1">
            <h2 id="slider-text-1">Slider de texto</h2>
            <p id="slider-text-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore voluptatem impedit ullam itaque reprehenderit.</p>
            <div class="botones-slider-text">
                <span onclick="sliderOn(0)" href=""><i class="fas fa-circle">clickMe</i></span>
                <span onclick="sliderOn(1)" href=""><i class="fas fa-circle">clickMe</i></span>
                <span onclick="sliderOn(2)" href=""><i class="fas fa-circle">clickMe</i></span>
                <span onclick="sliderOn(3)" href=""><i class="fas fa-circle">clickMe</i></span>
            </div>
        </div>

Change the text when pressing on another place

1 Answers1