• 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
1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 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>

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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن