Javascript 需要为不同的按钮操作重新加载页面

我有两个文本区。一个用于将英语转换为阿拉伯语，另一个用于将阿拉伯语转换为英语

这两个操作都有两个不同的按钮。我使用相同的文本区域来执行vise versa操作

如果我先执行Enlish到Ar的转换，那么它不允许我在没有页面加载的情况下从Ar到En

这里的问题是什么

<div class="col-xs-3">
                    <a id="Bar2en" rel="leanModal" name="ar2en" href="#ar2en" class="btn btn-block btn-lg btn-primary">Arabic to English</a>
                </div>
                    <div class="col-xs-3">
                    <a id="Ben2ar" rel="leanModal" name="ben2ara" href="#ar2en"  class="btn btn-block btn-lg btn-success">English to Arabic</a>
                    </div>

<div id="ar2en">
    <div class="container">
    <div class="row">
   <div class="col-xs-1 col-md-1">
       </div>

       <div class="col-xs-4 col-md-4">
        <div class="row">
            <div class="row" style="margin-top: 5%;">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    Arabic : 
                </div>
                </div>
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <textarea style="height:200px" id="arabic" name = "arabic" type="text" class="form-control"></textarea>                            
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <a class="btn btn-block btn-lg btn-success" id="ar2eng" href=""> Ar to En </a>
                </div>
                </div>
            </div>
        </div>
       </div>
       <div class="col-xs-4 col-md-4">
        <div class="row">
            <div class="row" style="margin-top: 5%;">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    English : 
                </div>
                </div>
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">
                    <textarea style="height:200px" name = "english"  id="english" type="text" class="form-control"></textarea>                            
                    <label id="engL">Enter text in the box</label>
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                <div class="col-xs-10 col-md-10">                           
                </div>
                </div>
            </div>
        </div>
       </div>       
    </div>
     </div>    
</div>

---

简言之，你想做的是阿拉伯语=>英语而不加载页面。对吗？请参考fiddle@PratikJoshi告诉你的问题：需要包含多个php源文件，所以我不能放在fiddle上为什么你不使用$.ajax？Dude，var English=document.getElementByIdenglish.value；在这里，var english变量在您的code in函数中定义为局部变量。它在ar2enarabic函数中被访问。您应该在所有js行之上全局定义它。什么是控制台错误？

    $( "#ar2en" ).click(function() {
            var arabic = document.getElementById("arabic").value;
            //alert (arabic)
            ar2en(arabic);
            return false;
            });

        function ar2en(arabic)
        {               
            var xmlhttp;
            english.innerHTML = '';
            if (window.XMLHttpRequest)
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }           
            xmlhttp.onreadystatechange=function()
            {
                //document.getElementById("old-records").innerHTML = "";                
                if (xmlhttp.readyState == 4 && xmlhttp.status==200)
                {
                    var div2 = document.getElementById("english");
                                div2.innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","processAra.php");              
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send('arabic=' + arabic + '&type=' + 'ar' ) ;           
            //alert(arabic);
        }               
// -----------
    $( "#english" ).keyup(function() {
            //var cat = $("#cats option:selected").html();
//          alert(test);
            var english = document.getElementById("english").value;
            //alert (arabic)
            en2ar(english);
            return false;
            });
        function en2ar(english)
        {               
            var xmlhttp;
            arabic.innerHTML = '';
            if (window.XMLHttpRequest)
            {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }           
            xmlhttp.onreadystatechange=function()
            {
                //document.getElementById("old-records").innerHTML = "";                
                if (xmlhttp.readyState == 4 && xmlhttp.status==200)
                {
                    var div2 = document.getElementById("arabic");
                                div2.innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("POST","processAra.php");              
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send('arabic=' + english + '&type=' + 'en' ) ;          
            //alert(arabic);
        }   
        $("#Ben2ar")
        .click(
            //location.reload(true);
             function ()
             {
             $("#ar2eng").hide();
             $("#engL").show();
            return;
             }
        );
        $("#Bar2en")
        .click(
            //location.reload(true);
             function ()
             {
             $("#ar2eng").show();
             $("#engL").hide();
            return;
             }
        );