Question

自动刷新文本区域内容

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

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

问题：

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>

更新：

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

Answer 1

您应该使用value代替innerHTML字段。

textarea可能将内容作为标记，但此内容会成为其值。

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

1 个答案: