Javascript 在jQuery按钮上单击，重用元素内容

自动刷新文本区域内容

我有两个文本区域。在按钮上单击此文本区域中的内容，将其从阿拉伯语翻译为英语或英语翻译为阿拉伯语

当我加载页面并从其中任何一个开始时，它都可以正常工作

问题:

1.）当我执行阿拉伯语到英语的翻译时，确实如此。现在，如果我在英语文本区输入文本并尝试转换为阿拉伯语。它不起作用。我需要为此重新加载页面

2.）当我加载该页面时，它只允许启动英语到阿拉伯语或阿拉伯语2英语对话。对于相反的对话，我需要重新加载页面

我试过了

english.innerHTML=''

首先制作内容
”
，但这也无济于事

这是我的密码：

    <div class="container">
        <div class="row">
           <div class="col-xs-4 col-md-4">
       </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">
                    Aabic : 
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="col-xs-10 col-md-10">
                    <textarea style="height:200px" id="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="ar2en" 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"  id="english" 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="en2ar" href=""> En to Ar </a>
                        </div>
                    </div>
                </div>
        </div>
       </div>
        <div class="show" id="show"></div>
        </div>
     </div>    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script>
    $( "#ar2en" ).click(function() {
            //var cat = $("#cats option:selected").html();
//          alert(test);
            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);
        }               
// -----------
    $( "#en2ar" ).click(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);
        }               
    </script>

对于字段，应该使用
value
而不是
innerHTML

textarea
可以将内容作为标记，但此内容将成为其值。
尝试使用if语句检查两个内容中哪一个有值。那么，无论哪一个有价值，翻译都只适用于该价值。@jacelysh:这没有帮助。即使它有价值，但如果不重新加载页面，它也不会翻译。我在没有“bootstrap”的情况下测试了你的代码。顺便说一句，你是在twitter bootstrap下工作的吗它与
.value
@一起工作。记者：是的，它与
一起工作。value
存在一个更简单的解释：textarea是表单的一个元素。和具有值的表单字段。@Lucas：谢谢，但使用
english.value=''
将停止提供任何result@reporter：我使用了
arabic.value=''在
之后，但没有help@user3449212这是因为您将
阿拉伯语定义为字符串：
var-arabic=document.getElementById（“阿拉伯语”）.value。将其定义为字段：
var arabic=document.getElementById（“阿拉伯语”）
并更改用法。@Lucastzesniewski:谢谢。起初我也是这样做的，但这对我没有帮助。如果我不使用
.value
，那么
var arabic=document.getElementById（“阿拉伯语”）给我“[object HTMLTextAreaElement]`
$( "#ar2en" ).click(function() {
        $('#english').val("");
        //var arabic = document.getElementById("arabic").value;
        ar2en(arabic);
        return false;
        });