Change H1 text using buttons dynamically Javascript Sourcecode

Javascript Task

How can i make it so that when a user clicks a button, the text from that button is shown in the hq tag located above it?

Tips: using event

 

    <div>
        <h1 id="h1n">Name</h1>
        <button onclick="update(event)">John</button>
        <button onclick="update(event)">King</button>
        <button onclick="update(event)">Queen</button>
    </div>
    <script>
        var h1name=document.getElementById('h1n');
        function update(event)
        {
             
           console.log(event.target.textContent);
            h1name.textContent=event.target.textContent;
        }
    </script>
    

Result

Change H1 text using buttons dynamically- Javascript

Javascript Task

How can i make it so that when a user clicks a button, the text from that button is shown in the hq tag located above it?

Tips: using even

Name

Source code

button color chage using javascript example

Javascript Task

How can I create an HTML button that, when clicked, triggers a Javascript function, and changes the button's color to red with each successive click?

Tips: use document.getElementById().style.backgroundColor

Source code

button change color using javascript source code

Javascript Task

How can I create an HTML button that, when clicked, triggers a Javascript function, and changes the button's color to red with each successive click?

Tips: use document.getElementById().style.backgroundColor

    
        <button id="btn1" onclick="change()">change color</button>
        <script>
            var btn1=document.getElementById("btn1");
            var boo=false;
            function change()
            {
                if(boo){
                    btn1.style.backgroundColor="red"; 
                    boo = !boo; 
                    return;
                }
                if(!boo){
                    btn1.style.backgroundColor="white";
                    boo = !boo; 
                    return;
                }
                
            }
        </script>
    

Result

Dynamically Create an H1 tag - Javascript Source code

Question

How can you use Javascript to accomplish the following task:
When a user clicks "Hello" button, how do you dynamically create an <h1> element and add it to a specific '<div>' element with the 'id' 'container' in the HTML document?

    <button onclick="adhelo()">add hello</button>
    <div id="divt"></div>
<script>
    var divt= document.getElementById("divt");

    function adhelo()
    {
        var newh1=document.createElement("h1");
        newh1.textContent="hello"
        divt.append(newh1);
    }
</script>

Result

Dynamically Create an H1 tag - Javascript

Question

How can you use Javascript to accomplish the following task:
When a user clicks "Hello" button, how do you dynamically create an <h1> element and add it to a specific '<div>' element with the 'id' 'container' in the HTML document?

Answer:

---

---

Source code

Guess the Number Javascript Game source code

Guess the number game

following code is for above game Html javascript

<H1 style="text-align: center; color:Blue">என் மனதில் இருக்கும் எண்ணை கண்டுபிடி?</H1>
<h3 style="text-align: center; color:magenta" id="pscore">Score:0</h3>
<h3 style="text-align: center; color:magenta" id="move">move:20</h3>

<p style="text-align: center;">நான் 1-10க்குள் ஒரு எண்ணை நினைத்திருக்கிறேன். அதனை கனித்து கட்டத்திற்குள் எழுதுக</p>
<center>
  <input id="guess" type="number" maxlength="2" style="border: solid;">
  <button onclick="fcompar()">சரியா?</button>
</center>
<p id="info"></p>
<p style="text-align: center;" id="ans"></p>
    


<script lang="javascript">
    var score=0;
    var heart = Math.floor(Math.random()*10)+1;
    console.log(heart);
    var move=20;
    var movebox= document.getElementById("move");
    var guessbox =document.getElementById("guess");
    var ans = document.getElementById("ans");

 function fcompar()
  {  
    
    let num = Number(guessbox.value); 
    if(heart==num){ 
      ans.textContent="Correct Answer. My Number: "+ heart; 
      ans.style.color="green"; 
      guessbox.style.borderColor="green"; 
      document.getElementById("pscore").textContent="Score:"+ ++score;
      heart = Math.floor((Math.random()*10)+1); 
      movebox.textContent="Move:"+ ++move; 
      if(score==10)
      {
      	document.write('<h1 style="text-align: center; color:green">You are winner</h1><br/> Score: 10')
      }
      return;
      
    }
    if(heart != num)
    { 
      ans.textContent="Wrong Answer. ";   
      if( heart > num ){
        ans.textContent = ans.textContent+ " My number is greater than your number";
      }   
      if( heart < num ){
        ans.textContent = ans.textContent+ " My number is less than your number";
      }   
      ans.style.color="red";   
      guessbox.style.borderColor="red"; 
      movebox.textContent="Move:"+ --move;
      //console.log(heart,num);
    }
    if(num>10||num<1){
      ans.textContent="Enter number between 1-10.";
      ans.style.color="black"; 
      guessbox.style.borderColor="black";
      //movebox.textContent="Move:"+ move;
    }
    if(move==0)
    {
    	document.write('<h1 style="text-align: center; color:red">Game Over</h1><br/>'+"Score : "+ score)
    }
    
  }

</script>

இது பற்றிய கருத்தை commentல் சொல்லுங்கள்