We Keep Coding

How can I test my html code part by part automatically? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a long HTML file with a lot of functionalities to show and hide it.
For example, users can hide the logo, show a large title, show some blocks and all these cases can be used by various pairs.
I can have lots of these cases. I need something to test all cases (show or hide some blocks, combine some of them, etc.) without commenting on parts of my code.
By the way, the structure of the code can be changed after some variations, that's what I am trying to test.
AS it is shown in this picture, in one case it can have logo, address, contact info, and in another case it can be blank.
How can i test my web

Here are a few ways you could acomplish that.
I'm using jQuery because it's on your question's tags, but you can do this with vanilla js as well.
$(document).ready(function() {
$('.toggle-logo').click(function() {
$('.logo').toggle()
})
$('.toggle-title').click(function() {
$('.title').toggleClass('transparent')
})
$('.toggle-text').click(function() {
$('.text').fadeToggle()
})
$('.toggle-section').click(function() {
$('.section').slideToggle()
})
})
.transparent {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="logo"><img src="https://dummyimage.com/60x40/cccccc/000000?text=Logo" alt="My logo"></h1>
<h2 class="title">My heading</h2>
<p class="text">My site text</p>
<div class="section">
<p>Section</p>
</div>
<div>
<button type="button" class="toggle-logo">Toggle logo (remove space)</button>
</div>
<div>
<button type="button" class="toggle-title">Toggle title (keep space)</button>
</div>
<div>
<button type="button" class="toggle-text">Toggle text (fade and remove space)</button>
</div>
<div>
<button type="button" class="toggle-section">Toggle section (slide and remove space)</button>
</div>

there is html validator but to hear you it is sort of dynamic code so won't be so helpful, i think the only way is to try it yourself, or put it in production mode and let people reporting you the problems they find while using it... (beta page)

Display one object - after clicking another object in JavaScript/HTML [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've got a very amateur question since I am very new to coding!
I have 4 button inputs "skolefag", ""sport", "fritid", "diverse" and 4 large squares (stacked upon eachother, different colors, but you can only see the red one)
I want to switch between divs (the large squares) when i click on the different categories, so that the contents and background color of the correct/matching large square shows.
What would be the easiest technique to achieve this trough?
Sorry again and thank you in advance!

You need to use onclick attribute on you button or add a click eventListenner to it.
Then you create a function that is called by onclick="myfunction(idButton)" or by your eventListener :
function myfunction(idButton) {
document.getElementById("my-elmt-to-set-up").backgroundColor = docuement.getElementById(idbutton).backgroundColor
}
and same thing for color properties, review javascript lesson I think --> after lesson you can make some incredible interactions

Here is one solution (which I think is neat):
document.addEventListener("DOMContentLoaded", function() {
change_menu("home");
});
function change_menu(
menu_to_show
) {
['home', 'second', 'third'].forEach(function(memuee) {
document.getElementById(memuee).style.display = 'none';
});
document.getElementById(menu_to_show).style.display = 'block';
}
<div style='display: flex;font-size: 200%;'>
<div>
<div style="background:green" onclick="change_menu('home')">Home</div>
<div style="background:red" onclick="change_menu('second')">Go To Second</div>
<div style="background:blue" onclick="change_menu('third')">Go To Third</div>
</div>
<div id="home" style="background:green">
HOME PAGE
</div>
<div id="second" style="background:red">
SECOND PAGE
</div>
<div id="third" style="background:blue">
THIRD PAGE
</div>
</div>
Of course this could be further optimized by referencing "page" divs by the "button" div's ids (e.g. home_page from home_button) or grouping ids within given "wrapper" divs, using classes, etc., but I think this is the essential solution.

How to build string with Bullet format [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to display string as
. string1
. string2
. string3
By using Append function of Jquery how to build string with bullet format.

Seeing as html lists are set up using ul and li tags, we can create a html list as follows:
<ul class="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
To append to it using jQuery:
$(".myList").append("<li>New Item</li>");
See the following JSFiddle to see it in action: JSFiddle -
That code adds an item to the list after 3 seconds, so you can see it being appended.

<ul style="list-style-type: normal;" id="list"></ul>
<script>
$('#list').append('<li>string1</li>');
</script>

Get div value using jquery or js [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
A have e3 and e2 divs, and parent div e.
There is too many e divs on the page.
How can I get e3 div value when I click on div e2?
Thanks.

There is no value attribute for div. You could get the innerHTML through javascript.
var divValue = document.getElementById('e3').innerHTML;

Let me first tell you how i understood the question. This is kind of how your html is structured:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="e">
<div id="e2">
i am e2 text
</div>
<div id="e3">
i am e3 text
</div>
</div>
<div id="e">
another e text
</div>
And this is the js code that will give the content of the e3 div when the user click on the e2 div.
$(document).ready(function(){
$("#e2").click(function(){
alert($("#e3").html());
})
});
Hope this helps :)

What are the best jQuery practices to use the same effect on different divs [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a chat support fixed on the left of my browser, I want to show and hide it using jQuery, I already did it by using the show() and hide() function but, when I want to apply the same jQuery effect on subsequent layers it does nothing, it just applies to the first element, what I want to ask is:
What is the best way to do this, I'm learning jQuery and have done some little things with this library but I can't figure how to do this without just copy and paste the same effect, should I use a "for" method?.
I leave my code below with a JS Fiddle example so you guys can figure out what's going on:
HTML Markup:
<div id="support_left">
<div id="support_show">
<figure id="show_control">
<img src="../img/chat.png" alt="Chat" />
</figure>
<div id="show_item">
<p class="support_cyan">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/call.png" alt="Call" />
</figure>
<div id="show_item">
<p class="support_orange">Chat with sales <span class="close">X</span></p>
</div>
</div>
<div id="support_show">
<figure id="show_control">
<img src="../img/mail.png" alt="Email" />
</figure>
<div id="show_item">
<p class="support_green">Chat with sales <span class="close">X</span></p>
</div>
</div>
</div>
Javascript:
$('#show_item').hide();
$('#show_control').click(function(){
$('#show_item').show();
});
$('.close').click(function(){
$('#show_item').hide();
});
Link to the JS Fiddle:
http://jsfiddle.net/45hsd6dp/
Thanks in advance.

First of all, change all your IDs to classes. IDs must be unique and how jQuery handles multiple instances of IDs is up to how individual browser/vendor decides to do with it. The behaviour is technically undefined and the browser will only select the first occurence, usually.
You will need to give your show and hide functions a context when the click event is fired. With your current script, you are telling jQuery that:
Whenever a click event is registered for any elements with the class .show_control, show ALL items that has the class .show_item.
See that there is no context in your function that is bound to the click event.
To give your event listening a context, always use $(this), which restricts the function to elements of interest:
$('.show_item').hide();
$('.show_control').click(function(){
$(this).next('.show_item').show();
});
$('.close').click(function(){
$(this).parent('.show_item').hide();
});
In layman's words, the function tells jQuery:
When .show_control is clicked it, search for it's immediate, next sibling that has the class of .show_item, and show it.
See that the statement has context, because $(this) restricts jQuery to the context of the element being clicked on. Depending on your markup, you will have to rely on various jQuery methods to transverse the DOM, such as .next(), .prev(), .parent(), .parents(), .find(), .children(), .siblings() and etc. All these functions are well-documented on the jQuery API, make sure you check that out.
See fiddle here: http://jsfiddle.net/teddyrised/45hsd6dp/6/