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

سفينة القراء Ship Of Readers · 7 أبريل 2020

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>

تمّ تعديل 7 أبريل 2020 بواسطة سفينة القراء Ship Of Readers

Mohamd Imran · 7 أبريل 2020

بتاريخ 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>

تحياتي

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

Othmane Othwsav · 7 أبريل 2020

بتاريخ 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>

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

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

النقطة و الفاصلة ; ليست ضرورية في آخر السطر.
من المستحسن استخدام let في تعريف المتغيرات.
من المستحسن استخدام 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>