使用JavaScript点击链接容器修改指定Div内容

原代码存在的问题 #

• JavaScript函数名不能使用连字符（show-text），这会被JS解析为减法操作，属于语法错误，需改为合法标识符（如showText）
• 点击事件调用函数时未传递当前元素的ID参数，函数无法识别点击的是哪个链接
• if语句语法错误：条件未用括号包裹，且判断相等使用了赋值符号=，应改为全等运算符===
• HTML结构存在多余的闭合标签，会导致布局结构异常

修正后的完整代码 #

<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(this.id)">
                <div class="home-side-menu">Mission Statement</div>
            </a>
            <a href="#" id="text-2" onclick="showText(this.id)">
                <div class="home-side-menu">Letter-writing</div>
            </a>
            <a href="#" id="text-3" onclick="showText(this.id)">
                <div class="home-side-menu">Peace Ideas</div>
            </a>
            <a href="#" id="text-4" onclick="showText(this.id)">
                <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>

额外优化建议 #

可以用switch语句替代多个if判断，让代码更简洁易维护：

function showText(id){
    const textEl = document.getElementById('new-text');
    switch(id){
        case "text-1":
            textEl.innerHTML = "SAMPLE TEXT 1";
            break;
        case "text-2":
            textEl.innerHTML = "SAMPLE TEXT 2";
            break;
        case "text-3":
            textEl.innerHTML = "SAMPLE TEXT 3";
            break;
        case "text-4":
            textEl.innerHTML = "SAMPLE TEXT 4";
            break;
        default:
            textEl.innerHTML = "";
    }
}

内容的提问来源于stack exchange，提问作者Richard Larson