Is there a function for adding a word in front of another in an HTML element like a p tag using JavaScript

Question

Say I have a select element with some options as shown below:

And a paragraph element

Sheep

What I am trying to do is have any of the options selected from the select element added to the front of the word in the p tag, so I can have One Sheep if one is selected, Two Sheep if Two is selected, and so on.

This is what I have tried but it just replaces the existing word in the p tag and other things that I have tried like insertBefore do not also work.

function getSelectedNumber() {
    let selectedNumber = document.getElementById('number-selector');
    let numb = selectedNumber.options[selectedNumber.selectedIndex];

    let newText = document.getElementById('sh');
    newText.innerHTML = " " + numb.innerText + " "+ newText.innerText;
}

This just keeps adding every new selection instead of replacing just the previously selected value so I get: "One Sheep" if I select One first, then if I select Two next I get "Two One Sheep" and so on. I want the previously selected option to be replaced by a new selection.

And for multiple elements, say:

Sheep Offspring

Music

The JavaScript code:

function getSelectedNumber() {
    let arr = ['sh','of','mu'];
    let selectedNumber = document.getElementById('number-selector');
    let numb = selectedVersion.options[selectedVersion.selectedIndex];

    for(let i = 0; i < arr.length; i++){
        let newText = document.getElementById(arr[i]);
        newText.innerHTML = " " + numb.innerText + "" ;
    }
}

But the code above just replaces the existing words in the p tags

user_4595934 · Answer

You can try like this by looking for prefix Element first and replace it's value. if it's not found then add that prefix element. Or

the other way is keeping that element in DOM always like

Sheep

Updated: modified code to support updating multiple elements.

function getSelectedNumber() {
    let arr = ['sh','of','mu'];
    let numb = document.getElementById('number-selector');

    for(let i = 0; i < arr.length; i++){
          const ele = document.querySelector(`#${arr[i]} .prefix`);
        if (ele) {
          ele.innerText = numb.value;
        } else {
          let newText = document.getElementById(arr[i]);
          newText.innerHTML = " " + numb.value + " "+ newText.innerText;
        }
    }
}
getSelectedNumber()


 
Sheep
Offspring
Music

user_12251687 · Answer

You can use add an empty span tag as a slot and just modify it with the value selected from the dropdown


Sheep

function getSelectedNumber() {
    let selectedNumber = document.getElementById('number-selector');
    let numb = selectedNumber.options[selectedNumber.selectedIndex];

    let newText = document.getElementById('slot');
    newText.innerHTML =  numb.innerText+' '
}
getSelectedNumber()

codepenlink

user_11898172 · Answer

What is happening with this code: when you write this part of the code:

newText.innerHTML = ` ${numb.innerText}  ${newText.innerText}`;

the ${} is just a sugar syntax to replace the concat with +

The newText.innerText will get the previos state. Example, if in this turn you have the option four Sheep. Now when you click in option one the newText.innerText will get the old value that was four Sheep and then will contruct this string:

${numb.innerText} ${newText.innerText};

That means:

numb.innerText // one
newText.innerText // four Sheep
result: one four Sheep
The next turn the newText.innerText will be one four Sheep and so on

Possible Solution:clean the newText.innerText with the value Sheep: newText.innerText='Sheep'; or fix the value Sheep in the newText:

newText.innerHTML = ` ${numb.innerText}  Sheep`;

var selectedNumber = document.getElementById('number-selector');

function getSelectedNumber() {
    let numb = selectedNumber.options[selectedNumber.selectedIndex];

    let newText = document.getElementById('sh');
    //First option:
    //newText.innerText='Sheep';
    //newText.innerHTML = ` ${numb.innerText}  ${newText.innerText}`;
    // second option
    newText.innerHTML = ` ${numb.innerText}  Sheep`;
}
selectedNumber.onchange = getSelectedNumber;

 

Sheep

Is there a function for adding a word in front of another in an HTML element like a p tag using JavaScript

3 Answers