Wie machen Sie eine Schaltfläche, die das gleiche Wort in zwei div in JS markiert?

Question

Darstellung der Ausführung der Taste:

Answer 1

Willkommen bei Stack-Überlauf !, Dies wird für Sie arbeiten -

function myFunction() { 
 
    var div = document.getElementsByTagName("span"); 
 
    div[0].innerHTML += 'Hello'; 
 
    div[1].innerHTML += 'Hello'; 
 
}

div { 
 
    display: inline-block; 
 
    width: 48%; 
 
    float: left; 
 
    border: 1px solid; 
 
    text-align: center; 
 
    height:50px; 
 
} 
 
button { 
 
    border: 1px solid; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
}

<div> 
 
    <span></span> world 
 
</div> 
 
<div> 
 
    <span></span> 
 
</div> 
 

 
<button class="button" onclick="myFunction()">Button </button>

Hinweis: Lesen Do How to Ask für Tipps zum Stellen von Fragen. Dies ist Ihr erstes Mal, deshalb ist die Antwort auf diese Frage, wenn Sie Zweifel haben, fragen Sie mich in den Kommentaren. Hoffe das ist hilfreich für dich.

Answer 2

Sie können Mark-Tag in Ihrem HTML-Code mit JS hinzufügen. Das Markierungstag funktioniert jedoch nur in HTML5. Es wird in neuen Browsern in Ordnung sein.

Forexample ist dies Ihre HTML-Code:

<div> 
    Word1 Word2 Word3 Word1 
</div> 

<div> 
    Word1 
</div> 
<input type="button" id="button" value="Click" onclick="" /> 

Dies ist Code CSS:

div { width:200px;height:200px;border:1px solid black;float:left; } 

Und das ist unser Javascript-Code:

var commonWord = 'Word1'; 
var button = document.getElementById('button'); 

button.addEventListener('click', function() { 

    var divs = document.getElementsByTagName('div'); 
    divs[0].innerHTML = divs[0].innerHTML.replace(commonWord, '<mark>' + commonWord + '</mark>'); 
    divs[1].innerHTML = divs[1].innerHTML.replace(commonWord, '<mark>' + commonWord + '</mark>'); 
}); 

Aber diese Javascript-Code Markierungen nur erste Wörter in divs Wenn Sie alle Wörter markieren möchten, können Sie dies verwenden:

var commonWord = 'Word1'; 
    var button = document.getElementById('button'); 

    button.addEventListener('click', function() { 

     var divs = document.getElementsByTagName('div'); 
     divs[0].innerHTML = divs[0].innerHTML.replace(/Word1/g, '<mark>' + commonWord + '</mark>'); 
     divs[1].innerHTML = divs[1].innerHTML.replace(/Word1/g, '<mark>' + commonWord + '</mark>'); 
    });