اذهب إلى المحتوى
  • 0

كيف أقوم بتغير نص على حسب الزر الذي يتم نقره بالجافاسكريبت

السؤال

 <body>
        <"p id="text" >

            this is the text
        </p>    
    <button type="button" class="butts" id="buttonL" >Click Lift</button>
     <button type="button" class="butts" id="buttonR">Click Right</button>
     
    <script type="text/javascript">
        var textL =  "النص الذي يجب عند الضغط على الزر الأيسر";
        var textR =  "النص الذي يجب عند الضغط على الزر الأيمن";
    </script>
</body>

تم التعديل في بواسطة سفينة القراء Ship Of Readers
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 12 دقائق مضت قال سفينة القراء Ship Of Readers:

 <body>
        <"p id="text" >

            this is the text
        </p>    
    <button type="button" class="butts" id="buttonL" >Click Lift</button>
     <button type="button" class="butts" id="buttonR">Click Right</button>
     
    <script type="text/javascript">
        var textL =  "النص الذي يجب عند الضغط على الزر الأيسر";
        var textR =  "النص الذي يجب عند الضغط على الزر الأيمن";
    </script>
</body>

السلام عليكم @سفينة القراء Ship Of Readers

الامر بسيط هكذا :) 

 

<!DOCTYPE html>
<html>


<body>

<p>change text based on button click</p>

<p><button onclick="changetext()">change1</button></p>
<p><button onclick="changesec()">change2</button></p>

<div id="textO"></div>

<script>
function changetext() {
  var x = document.getElementById("textO");
  if (x.innerHTML === "") {
    x.innerHTML = "text1";
  } 
}
function changesec() {
  var x = document.getElementById("textO");
  if (x.innerHTML === "text1") {
    x.innerHTML = "text2";
  } 
}
</script>

</body>
</html>

تحياتي 

اتمنى ان اكون قد افدتك :) 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 34 دقائق مضت قال سفينة القراء Ship Of Readers:

 <body>
        <"p id="text" >

            this is the text
        </p>    
    <button type="button" class="butts" id="buttonL" >Click Lift</button>
     <button type="button" class="butts" id="buttonR">Click Right</button>
     
    <script type="text/javascript">
        var textL =  "النص الذي يجب عند الضغط على الزر الأيسر";
        var textR =  "النص الذي يجب عند الضغط على الزر الأيمن";
    </script>
</body>

السلام عليكم,

هذا هو البرنامج, و هته بضع نصائح بخصوص لغة الجافاسكربت:

  1. النقطة و الفاصلة ; ليست ضرورية في آخر السطر.
  2. من المستحسن استخدام let في تعريف المتغيرات.
  3. من المستحسن استخدام querySelector في تحديد عناصر الدوم.
<body>
    <p id="text">
        this is the text
    </p>
    <button type="button" class="butts" id="buttonL">Click Lift</button>
    <button type="button" class="butts" id="buttonR">Click Right</button>

    <script type="text/javascript">
        let textL = "النص الذي يجب عند الضغط على الزر الأيسر"
        let textR = "النص الذي يجب عند الضغط على الزر الأيمن"
        let text = document.querySelector("#text")
        document.querySelector("#buttonL").addEventListener("click", function(){
            text.innerHTML = textL
        })
        document.querySelector("#buttonR").addEventListener("click", function(){
            text.innerHTML = textR
        })
    </script>
</body>

تحياتي الحارة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...