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.

Creating HTML buttons dynamically using HTML, CSS and Javascript [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
I wish to dynamically add a button on a html form so that a user can upload multiple files when filling-in the form. The css design is both elastic and fluid and the intention is that whenever a user clicks on the "add file" link, a new button is added to allow the user to browse for the file, add it and finally upload it. The buttons should appear on the main content area of the page and should not overflow outside the footer area and should be rendered vertically with each button appearing on a newline. The code below does exactly that. This question is very much related to this question but with a twist of the css (design) requirements.
function myFunction() {
var btn = document.createElement("BUTTON");
var text = document.createTextNode("Browse..");
btn.appendChild(text);
var newbutton = document.getElementById("button"); //new div button element introduced on html.
document.body.insertBefore(btn,newbutton);//insert before method
}
/*Mailu*/
div {
padding: 1px 0;
}
#header {
background: #DDDDDD;
}
#footer {
clear: both;
background: #DDDDDD;
}
/*add css as suggested here https://stackoverflow.com/a/2038374/2941758*/
button{display:block;}
<!DOCTYPE html>
<html>
<body>
<link href="button.css" rel="stylesheet" type="text/css"/>
<div id = "header">
<p>Home</p>
</div>
<p>Upload file.</p>
First name: <input type = "text" name = "Firstname"><p>
<div id = "button"> <!--added div button on html-->
<a href="javascript:void(0)" onclick= "myFunction()" > Add file</a>
</div>
<div id="footer"><p>footer</p>
</div>
</body>
</html>
[1]: https://stackoverflow.com/questions/29943352/dynamically-create-element-but-use-a-href-instead-of-a-button-onclick

Replace:
#button {
With:
button {
The # is an id selector, meaning it will apply the styles to the element that has id="button".
If you leave out the #, it will match all <button> elements.

How to take the closest/nearest element of a specific class [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 8 years ago.
Improve this question
I am trying to get the closest/nearest class of a specific element.
How can I make it work? I am currently trying to use .closest.
HTML
<div class="test">.test</div> <!-- Not this -->
<div>
<div class="test">.test</div> <!-- That's the one I need to grab -->
</div>
<div id="test"></div> <!-- This is the reference element -->
<div class="another"></div>
<div class="another"></div>
<div class="test">.test</div>
JS
var test = $('#test2').closest('.test');
console.log(test);
If closest isn't the right method, how can I actually grab the closest 'test' class?
I tried parentsUntil() as well.
Actually if that can help, in my use case I will ALWAYS need the nearest PARENT element of a specific class, whether that parent element is within another element or not, like in this HTML example.

If I understand correctly then you are looking for the nearest element that appears before a specific element in HTML source order (and you do not know/cannot change the HTML structure). The simplest solution is this:
jQuery() collections are sorted in the order in which the elements appear in DOM (unless the documentation states otherwise). So we have:
$("#test, .test")
// [div.test, div.test, div#test, div.test]
// ^ ^
// | +---- reference element
// +-------------- nearest element before it
//
// notice that the elements are sorted in the order they appear in HTML
Just combine this with jQuery.index():
$(function() {
var $ref = $("#test");
var $col = $(".test").add($ref);
var index = $col.index($ref);
$col.eq(index - 1).css("background-color", "orange");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test">.test</div> <!-- Not this -->
<div>
<div class="test">.test</div> <!-- That's the one I need to grab -->
</div>
<div id="test"></div> <!-- This is the reference element -->
<div class="another"></div>
<div class="another"></div>
<div class="test">.test</div>

Not sure, why your HTML is structured like that, but this should select your required div:
$('.test',$('#test2').prev('div')).text() // find a div with class test, contained within div that lies previous to #test2

Closest searches for parent elements in DOM tree. For siblings you cannot easily get the nearest as such, but if you know direction up/down you can select from .nextAll('.test:first') and prevAll('.test:first').

how to simply this code? I would show 1 div on click and hide other div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
how to simply this code? I would show 1 div on click and hide other div.
I do this for ten and more divs... how to simply code?
code
HTML
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>
<div id="parte1"></div>
<div id="parte2"></div>
<div id="parte3"></div>
Javascript:
$("#parte1").on('click', function() {
$("#div1").fadeIn(100);
$("#div2").fadeOut();
$("#div3").fadeOut();
});
$("#parte2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn(100);
$("#div3").fadeOut();
});
$("#parte3").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeOut();
$("#div3").fadeIn(100);
});

You can change your html to something like this
Demo
http://jsfiddle.net/g4whs/5/
HTML
<div id="div1" class="div"><p>div1</p></div>
<div id="div2" class="div"><p>div2</p></div>
<div id="div3" class="div"><p>div3</p></div>
<div class="parte" id="parte1" data-num="1"></div>
<div class="parte" id="parte2" data-num="2"></div>
<div class="parte" id="parte3" data-num="3"></div>
and JS
$(".parte").on('click', function() {
var n = $(this).data('num');
$('.div').fadeOut();
$('.div').eq(n-1).fadeIn(100);
});
You could actually just parseInt the parte id and get the index but using data-num, you can change your IDs or not use them at all

you can change them all to the same class and then use:
$(".class").click(function(){
$(".class").not($(this)).hide();
});
That may work, or something similar