Member Avatar for grunge man

Hi I'm new to JavaScript. Looking to get some pointers and some discussion going. I'm making a simple JavaScript code where if you click some text it will make it the same as the other text in both cases. Apparently I am doing something wrong or my logic is flawed. It would be cool for some help on this thank you.

example: if you clickd on hi dude it will make it say hi man instead
if you click on hi man it will make it say hi dude

<html>
<head><script type="text/javascript">
var a=document.getElementById('idone');
var b=document.getElementById('idtwo');

if (document.getElementById('idone') = true)
  {
  document.getElementById('idone') =b;
  document.getElementById('idtwo') =false;
}

if (document.getElementById('idtwo') = true then document.getElementById('idtwo') =a
{
document.getElementById('idtwo') =b;
  document.getElementById('idone') =false;
}

onclick="document.getElementById('idone')";
onclick="document.getElementById('idtwo')";
</script>
</head>
<body>


<p id="idone">hi dude</p>
<p id="idtwo">hi man</p>

</body>
</html>
  • 4 Contributors
  • 5 Replies
  • 355 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by grunge man
Member Avatar for Taywin

First, you should not use 'p' tag to do this. 'p' tag does not require closing tag and it would not be safe. You should use 'span' or 'div' tag instead. Second, your if-else statement syntax looks more like psudo code instead of JavaScript syntax. Third, you get DOM element and attempt to assign a value/object to replace it. Fourth, onclick() is an event tied to an object. You cannot use it the way you did. Last, you are using 'assignment' symbol (=) instead of comparing symbol (==) in your if-else condition. This is a very basic in programming that may often be found from those who are new to programming.

I believe you are doing something too much more than you can chew. You need a more reading about how to do JavaScript.Your fundamental is not there yet.

The sample code below will copy the text from one to the other onclick, but it will give you the result only the first time you do it. Later time, it will not change your text even though it is still working. The reason is that both texts are not the same, so you won't see any different.

<html>
<head><script type="text/javascript">
function swapItTo(obj, id) {
  var el = document.getElementById(id)
  obj.innerHTML = el.innerHTML
}
</script>
</head>

<body>
<div id="idone" onclick="swapItTo(this, 'idtwo')">hi dude</div>
<div id="idtwo" onclick="swapItTo(this, 'idone')">hi man</div>
</body>
</html>
Edited by Taywin because: n/a
Member Avatar for rajarajan2017

use

<div id="idone">hi dude</div>
<div id="idtwo">hi man</div>

Instead of

<p id="idone">hi dude</p><p id="idtwo">hi man</p>
Member Avatar for scrappedcola

While I think the code that Taywin is provided is sound, I don't think his explination hits the right mark. The reason he presents for not using a <p> tag is off mark (I would welcome him to provide documentation to support his claim). <p> Require a closing tag to render properly. It is no more dangerous to use a <p> than to use a <div>. Both also support onclick events. The only tags that do not require an explicit closing tag is <br> and <img> tags. That being said I also think you need to understand what is going on with your code compared to the one Taywin provided. Your entire problem lies in your use of document.getElementById. This function is intended to select a DOM element that has this ID. You cannot copy directly elements such as the way you attempt here

document.getElementById('idone') =b;

. To achieve a cloning of the contents and properties of one element to another you need to do it by the elements properties. This is done in Taywin's example where he selects the given element and sets's the property innerHTML. The innerHTML is the contents of the div elements that he grabs. Other properties that you can set in this manner are id, class, and style. For the click event you had the correct idea but the execution is wrong. You need to place the onclick="" as a property in the HTML (this is but one way but it is the simplest for your level right now). You are also attempting to set the onclick to a reference to a dom Element. What the onclick will accept is a function or some other code that executes when the event is fired. This is why Taywin writes

<div id="idone" onclick="swapItTo(this, 'idtwo')">hi dude</div>

. What this html line states is when the user clicks on the <div> (again can be a <p> which would be semantically correct as well in this instance) call the function swatItTo passing it the arguments this and id. The var "this" in the function is the element that triggered the click event (being the div you clicked on) and the id is the string that denotes the id of the other div. I think it would help you to check out the w3c schools tutorial on the DOM and events as well as the YUI theater's video lectures on the matter. Don't let people tell you not to do something just because it might be beyond your knowledge. It is only through trying that we learn. http://www.facebook.com/topic.php?uid=7551735644&topic=11314 - Core javascript and dom lectures and http://www.w3.org/DOM/ -- info on the DOM

Member Avatar for Taywin

The reason he presents for not using a <p> tag is off mark (I would welcome him to provide documentation to support his claim). <p> Require a closing tag to render properly. It is no more dangerous to use a <p> than to use a <div>.

Thanks for pointing out. Sorry that I said 'p' tag is not safe while I should have said it could be obscure.

'p' tag does not need to have explicit closing tag because browser nowadays automatically places it for you. Though, many people does not use 'p' tag as its purpose should be. As a result, 'p' tag may be used as 'div' instead. There is at least one tag that 'div' can hold while 'p' tag cannot.

It is no more dangerous to use a <p> than to use a <div>.

The example code below demonstrates that 'p' tag is broken when you use 'hr' inside it. As a result, you cannot copy the 'hr' outside 'p' even though I explicitly put in closing 'p' tag.

<html>
<head><script type="text/javascript">
function swapItTo(obj, id) {
  var el = document.getElementById(id)
  obj.innerHTML = el.innerHTML
}
</script>
</head>

<body>
<p id="idone" onclick="swapItTo(this, 'idtwo')">hi dude
<br />
hi hi
<hr />
<span>how are you?</span>
</p>
<p id="idtwo" onclick="swapItTo(this, 'idone')">hi man
<span>
Found it?
</span>
</p>
</body>
</html>

Comparing the code above with the one below, I have changed the 'p' tag to 'div' tag. In this case, you can copy regardless 'hr' tag is inside.

<html>
<head><script type="text/javascript">
function swapItTo(obj, id) {
  var el = document.getElementById(id)
  obj.innerHTML = el.innerHTML
}
</script>
</head>

<body>
<div id="idone" onclick="swapItTo(this, 'idtwo')">hi dude
<br />
<span>hi hi</span>
<hr />
how are you?
</div>
<div id="idtwo" onclick="swapItTo(this, 'idone')">hi man
<span>
Found it?
</span>
</div>
</body>
</html>

In conclusion, using 'p' tag may not always give desired behavior if the purpose of use is obscured (TC does not explicitly state that this copy will always be a paragraph or just an area of display even though 'p' tag is used). Using 'div' would be much more powerful and using 'span' should be more clear (dealing with text only).

PS: I did not say do not try anything beyond your knowledge, please more carefully read what I said. I am saying he was trying to do more than he could chew. He needs to do some reading to build up his fundamental. Yes, you could learn through practicing (hard way). However, you should have at least done the homework before you jump into it right way, or there will be many unanswered questions in the way to discourage you to accomplish what you are trying to do.

PSS: Please do not heavily rely on w3school. Certain information on the site is not up-to-date. Please use w3.org as reliable source instead.

Edited by Taywin because: n/a
Member Avatar for grunge man

Actually lol I made the code super fast and didn't correct it I realize all the problems I had with that and since I was rusty thats why I posted it, but I came up with something that resembles what I was trying to do. here is is its not how i wanted it but it works

<html> 
<head> 
<script type="text/javascript"> 
function taystersOnclickFunction() {
paragraphTextTwo = document.getElementById('idtwo').innerHTML;
paragraphTextOne = document.getElementById('idone').innerHTML;
document.getElementById('idone').innerHTML = paragraphTextTwo;
document.getElementById('idtwo').innerHTML = paragraphTextOne;
}




</script> 
</head> 

<body> 

<p id="idone" onclick='taystersOnclickFunction()'>Hi Dude </p> 
<p id="idtwo" onclick='taystersOnclickFunction()'>Hi Man </p> 

</body>
 </html>

ps. I knew the p tags were correct I'm glad you leard something new :).
Thanks for ur help so far guys, b4 I mark this as solved,this is what I'm wondering. Is there a way to make it so it only does it to one when clicked on not both simultaneously?Also, If both are the same it will switch the valuse anyways with either one.

I know that the values will probably have to be stored somewhere else maybe in an array or something. Tell me what you think

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.