First time writing here. I am new to programming and here I am learning a lot of things!
Now, I want write this: for each clicked element of a class create a var with nextSibling's text and show it somewhere. The following code is for sure full of error, but it is what i thought:
//wants to create an accessible variable (even out the function)
//from a sibling element's text.
$(".games").click(function(){
myVar = this.next("p").html;})
the HTML situation is this:
<button class="games">GAME ONE</button><p> THESE ARE THE DETAILS OF THE GAME 1</p>
<button class="games">GAME TWO</button><p> THESE ARE THE DETAILS OF THE GAME 2</p>
<div id="show"> I will show the content of paragraphs here if one of the two buttons is clicked</div>
I thank everybody because - I repeat - I am learning a lot here.
EDIT
Thanks everybody for the answers. I am trying something related to your suggestions, but i think the problem should be another because actually I am working with chessJS and chessboardJS to make a page where show the moves of a chess game in a chessboard. But, when I try to say that myVar (where there is the moves list to pass to the chessJS function load_pgn) is the content of one id like this:
<p id="theGame">1. e4 e5</p>
// myVar contains the moves list
var myVar = $("#theGame").html();
Chess().load_pgn(myVar);
all works fine, but I cannot make it work by saying that: for each clicked element (of a class, maybe) myVar is the html value of the clicked element. Furthermore in the console I receive an error that says that pgn_replace is not a function.
<p class="someGames">1. e4 d5 2 Nf3 Nc6</p>
<p class="someGames">1.d4 e5</p>
Maybe I explained the fact a bit bad. this is it. Thank you again for the answers.
FINAL EDIT
Thanks to your answers and other discussions on the site I managed to find a solution to take the text of one element of a class and store in a var with the following code:
$('.class').click(function(){
this.textContent = $(this).html();
var myVar = $(this).html();})`
Thank you!
function buttonClick(button){
document.getElementById("show").innerHTML=button.innerHTML
}
<button class="games" onclick="buttonClick(this)">GAME ONE</button><p> THESE ARE THE DETAILS OF THE GAME 1</p>
<button class="games" onclick="buttonClick(this)">GAME TWO</button><p> THESE ARE THE DETAILS OF THE GAME 2</p>
<div id="show"> I will show the content of paragraphs here if one of the two buttons is clicked</div>
const button = document.querySelector(".games")
button.addEventListener('click', () => {
myText = document.querySelector('p').innerHTML = 'your text : I will show the content of paragraphs here if one of the two buttons is clicked '
)
<button class="games">GAME ONE</button><p> THESE ARE THE DETAILS OF THE GAME 1</p>
<button class="games">GAME TWO</button><p> THESE ARE THE DETAILS OF THE GAME 2</p>
<div id="show"> <p> I will show the content of paragraphs here if one of the two buttons is clicked </p></div>
Related
I am using a modified version of the w3 schools example to have multiple draggable boxes containing information and it works very well, but now I must turn that into a function that can be called at any time. I pieced together this from multiple examples:
function createList() {
let div = document.createElement('div');
//div.classList.add('draggable', 'list');
div.innerHTML = `
<!-- list ui template -->
<div class="draggable list" id="list-template">
<!-- listheader div will contain file name variable, etc. -->
<div class="listheader">New Shopping List</div>
<h3>List - Incomplete</h3>
<p>Test Item<p>
<p>Number of items : 1</p>
</div>`
document.body.appendChild(div);
document.getElementById('listsdiv').appendChild(div);
}
I import it at the end of my index.html. The javascript from w3 that handles moving the boxes uses the class "draggable". This does not work. That might be obvious to some people, and I really hope this is the case because I can't find a solution online. I used to use id instead of class and other mistakes, but I've gone over it all and I'm stuck. Why does it only work when it's hard coded into the html? I apologize if this is not enough information, thank you for your help!
I'm trying to make it so that one of the tabs on my portfolio website creates a drop down menu. I was able to make it so that when people click on the picture, it makes a dropdown menu. However, I also wanted the same thing to happen when they click on the text as well. So my problem is that I have two buttons with different classes that I want to have the same function. I thought I could do that with the javascript I have now, but it doesn't seem to work. Here's a link to a porotype I created https://iancoffman.com/digitalart2.html. The code should be viewable publicly.
What am I doing wrong?
What code are you using for your drop down menu that you want to show when clicking? You could use basic JavaScript to trigger the same function when you click each item.
A basic function example would be:
<script>
function myFunction() {
document.getElementById("menu").style.display = "block";
}
</script>
You could attach this function to a div that contains both the text and image like:
<div onclick="myFunction()">
<p>Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings">
</div>
<div id="menu" style="display:none;">Dropdown Menu</div>
Or you could add this function to each item if they are not connected:
<p onclick="myFunction()">Text To Click.</p>
<img src="images/paint-symbol.png" alt="paintings" onclick="myFunction()">
<div id="menu" style="display:none;">Dropdown Menu</div>
Not sure what exactly you are trying for but this might get you started with the concept.
I have following paragraph in html code:
<p id=tag1> html statements before click </p>
... and I am trying to write function which would split the above paragraph to two paragraphs like this :
<p id=tag1> html statements after click </p><p id=tag2></p>
... with intention to exchange then tag1 id with tag2 id to have final result:
<p id=tag2> html statements after click </p><p id=tag1></p>
I am trying to achieve desired result by this function:
<script>
function myFunction() {
document.getElementById("tag1").innerHTML = "html statements after click </p><p id='tag2'>";
document.getElementById("tag2").id = "tagTmp";
document.getElementById("tag1").id = "tag2";
document.getElementById("tagTmp").id = "tag1";
}
</script>
... but this donesn't work to me. Problem is with the first step - innerHtml modification works different ways as expected and yealds following result:
<p id=tag1> html statements after click
<p></p>
<p id=tag2></p>
</p>
... paragraph id=tag2 is still nested inside paragraph id=tag1 (I want to have the both paragraphs at the same level).
Is there any way to get requested functionality? Can you help please?
Thanks.
document.getElementById("tag1").innerHTML = "html statements after click </p><p id='tag2'>";
So the reason this is not acting as you expect it to is because this is not changing the markup, as you think it is. innerHTML does not include the open and close tags. Your interacting with a dom node, so you can't close the parent node like that. As you can see it tries to protect your weird request of a single </p> and creates a new open for it so it's paired.
If you were going to do this with jquery, as that's one of your post tags, it could possibly be something like...
//get the existing element
var $originalTag = $('#tag1');
//update its id
$originalTag.prop('id', 'tag2');
//create a new one after it with the original id
$('<p id="tag1"></p>').insertAfter($originalTag);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="tag1">An Existing Tag</p>
Here is a sample code for you
<html>
<div>
<p id=tag1> html statements before click </p>
</div>
<script>
var
p = document.querySelector('p'),
p2 = document.createElement('p');
p2.id = 'p2';
p2.textContent = ' p2...p2 '
p.outerHTML += p2.outerHTML;
</script>
</html>
I am a beginner in Javascript and I am not absolutely sure how to put together the function what I try to achieve.
So, I have a HTML5 page and I must stick to my ID structure as different functions are tied to IDs.
My problem is I have an id within an id (It must stay an ID, it cannot be swapped with class)
E.G.
<div id="outterid">
CLICK ME
<div id="innerid">
<p>Hello World</p>
</div>
</div
Where, <div id=outterid"> pops up as a tooltip (My other javascript takes care of that function. And within that the link CLICK ME and the hidden <div id=innerid">.
So when you click CLICK ME, <div id=innerid">becomes visible. (Note: <div id="outterid"> is visible, while you are clicking)
So I need to achieve the href="#innerid" through javascript, because at the moment simply href=""
E.G.
CLICK ME
does not work, because the #innerid within the #outterid.
Also, the 'CLICK ME' link has to be triggered by onmouseover="this.click();". So, the link clicked when the mouse hovers over it.
I hope I managed to clearly explain what is my problem and what result I am looking for.
Thanks for your help in advance.
Are you talking here about scrolling to the relevant div (e.g. #innerid)? In which case I don't think your problem has anything to do with javascript, but rather you've missed the a off of <href="#innerid">CLICK ME</a>... I've tried replicating your problem in JSFiddle and with CLICK ME it scrolls to the correct div regardless of if it's in a nested outer div or not.
It's not clear exactly what you're after here but i've had a shot. This example will display the #innerid div when you click on the anchor tag. Hopefully this will help you.
function myFunction(href) {
var id = href.split('#')[1];
document.getElementById(id).style.display = 'block';
}
#innerid { display:none; }
<a onclick="myFunction(this.href)" href="#innerid">CLICK ME</a>
<div id="outterid">
<div id="innerid">
<p>Hello World</p>
</div>
</div
EDIT: I figured it out, thanks for your time!
I have a div with an id of container and three buttons above that.
When a user clicks any of the buttons above, then javascript replaces the contents of the div according to the buttons pressed using innerHTML.
Clicking on each button once works fine because I'm just replacing the elements in the div. But when I try to reclick the buttons my console prints out 'Uncaught TypeError: Cannot read property 'innerHTML' of null '
So I'm assuming innerHTML gets rid of the elements entirely. Is there a way to retrieve those elements so I can constantly click the buttons and have the respective elements appear?
If not, I was thinking of having a div for each button in my html file and then using display:none. When a user clicks on any of the buttons, the div for that button will be set to display:block.
***Edit****. I believed I answered my own question.**
Yes, using innerHTML does get rid of previous elements inside the div container. Therefore, if you wanted to grab those elements again, you can't. and the above error will be printed in the console.
JsFiddle : http://jsfiddle.net/7Q4vD/
<div id="buttonNav">
<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>
</div>
<div id="container">
<p id="para">Data in paragraph</p>
</div>
I Tried the following, and it worked perfect, check it:-
<button type="button" id="red"onclick="myFunction(id)"> Red!</button>
<button type="button" id="blue"onclick="myFunction(id)"> Blue!</button>
<button type="button" id="green"onclick="myFunction(id)"> Green!</button>
<div id="container"></div>
<script>
function myFunction(e){
document.getElementById('container').innerHTML = e
}
</script>
Ok, now got the problem.
You're writing:-
<div id="container">
<p id="para">Data in paragraph</p>
</div>
and then,
var container = document.getElementById('container');
and then you're setting the innerHTML with a sring:-
container.innerHTML = data;
So, suppose data = "abc";
The your html becomes
<div id="container">
abc
</div>
So, the p tag is not present here.
Thus when you're try the following in the next time:-
document.getElementById('para').innerHTML = data2;
It's not getting anything and showing the error.
Either you replace
document.getElementById('para').innerHTML = data2;
with
container.innerHTML = data2;
And remove the p tag from your html, or write:-
var para= document.getElementById('para');
and then write the following in respective cases:-
para.innerHTML = data2;
para.innerHTML = data;