使用 Javascript 更改另一個 Div 中的內容

Question

我希望透過點擊連結容器並使用JavaScript 函數(show-text()) 來更改另一個div (id="new-text"< /code>) 的內容代碼>)

 <section>
        <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
            <a href="#" id="text-1" onclick="show-text()">
            <div class="home-side-menu">Mission Statement</div></a>
            <a href="#" id="text-2" onclick="show-text()">
            <div class="home-side-menu">Letter-writing</div></a>
            <a href="#" id="text-3" onclick="show-text()">
            <div class="home-side-menu">Peace Ideas</div></a>
            <a href="#" id="text-4" onclick="show-text()">
            <div class="home-side-menu">Power Of Love</div></a>
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
            <div class="text-formatting" id="new-text">
            </div>
        </div>
        </div>
    </section>



    <script type="text/javascript">
        function show-text(id){
            if id="text-1"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 1"
            if id="text-2"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 2"
            if id="text-3"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 3"
            if id="text-4"
            document.getElementById('new-text').innerHTML="SAMPLE TEXT 4"
        }
    </script> 

Answer 1

更改後的程式碼（工作）

<section>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
            <a href="#" id="text-1" onclick="showText('text-1')">
                <div class="home-side-menu">Mission Statement</div>
            </a>
            <a href="#" id="text-2" onclick="showText('text-2')">
                <div class="home-side-menu">Letter-writing</div>
            </a>
            <a href="#" id="text-3" onclick="showText('text-3')">
                <div class="home-side-menu">Peace Ideas</div>
            </a>
            <a href="#" id="text-4" onclick="showText('text-4')">
                <div class="home-side-menu">Power Of Love</div>
            </a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-9 col-xl-9">
            <div class="text-formatting" id="new-text">
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    function showText(id) {
        if (id === "text-1")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 1";
        if (id === "text-2")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 2";
        if (id === "text-3")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 3";
        if (id === "text-4")
            document.getElementById('new-text').innerHTML = "SAMPLE TEXT 4";
    }
</script>

在 onclick="show-text() 內，傳遞有效參數（與您的 IF 條件相符），例如「text-1」或「text-2」..

應該是
其餘部分也是如此。

並在 Script 中使用 === （嚴格相等檢查）進行比較。檢查Js 比較運算子