Home>

We are studying with a book called JavaScript for beginners
I am learning a program that reads and moves CSS created outside the HTML code.
The content is an image viewer. Click the → button in the viewer to display the image display number
Although it has a color and shadow specified by CSS, it does not change just by changing the image.

Error message

No error message

### Corresponding source code
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Simple Image Viewer</title>
<link rel = "stylesheet" href = "viewer.css">
<script>
function revBtnClick () {
  window.alert ('Konchiwa');
  window, alert ('goodbye');
}
function fwdBtnClick () {
  document.getElementById ('no'). innerHTML = 'No.2';
  document.getElementById ('pict'). src = 'img/2.jpg';
  document.getElementById ('no'). className = 'no2';
}
</script>
</head>
<body>
<img src = "img/1.jpg">
<div>No.1</div>
<button onclick = "revBtnClick ();">←</button>
<button onclick = "fwdBtnClick ();">→</button>
</body>
</html>

Enter the language name here
Source code
.no1 {
color: green;
}

.no2 {
color: red;
text-shadow: 2px 2px 1px rgba (255,0,0,0,5);
}

A person who can hear me told me that the code is correct.
I verified it with Internet Explorer, Chrome, and Firefox browsers.
The text display did not change even if the image changed.
Thank you.

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.

  • Answer # 1

    If you write CSS directly, it will work normally, so I think the cache is only working

    Please try to delete the cache and super reload

    How to clear the cache with Chrome and Firefox (super reload, hard cache clear)

    Summary of how to delete Chrome cache completely.

  • Answer # 2

    I have commented on the good part of the question, but I reviewed the code first.
    If you embed CSS directly in HTML, text hits color anyway.
    The CSS may be one of the following: "Could not correctly specify the location where the file is placed from HTML", "The CSS file does not exist in the first place", or "The CSS file is damaged".

    The color specification for text-shadow is 0.5, not 0,5 at the end.
    This specifies transparency, 1 is 100%, and the remaining transparency is written as a decimal point, so it is a dot (period) instead of a comma.

    RGBA Colors

    This should also hit text-shadow. All that remains is the CSS file link.

    Addition:
    The meaning is completely different between commas and periods.
    A comma is used as a delimiter for arguments and settings. If it is a period, it will be a function call or an object property call.
    The program will only workas instructed. "It looks like" is not "it", so the program is NG.
    Each symbol has its own meaning, so don't be trapped by just passing the textbook, write the code while tightening the meaning.

  • Answer # 3

    When I actually moved the source, the color changed and it moved normally.

    Then, the location of "viewer.css" is suspicious, but is it placed on the same level as the html file?
    If it is in the same hierarchy, it will work.

    After that, it is a good idea to check the browser standard developer tool for errors.

  • Answer # 4

    I tried moving the source of the presentation with chrome + codepen for now, but it works normally.
    Possible reasons are the lack of type ="text/css"in the link tag or the css path is wrong.
    Also,alert, the event when the ← button is pressed, moves without attachingwindow., so I do not know at first sight, but the second line is not a period but a comma It is connected with.

  • Answer # 5

    Thank you so much for your quick answers.
    Anyone's suggestions were very helpful and helpful.
    I would like to give everyone the best answer.
    This time, I'm going to live as Notes, who actually showed the code.
    I was kind enough to teach Super Reload.
    As a result of the verification, as you pointed out, as long as the difference and embarrassed
    HTML and CSS were not in the same hierarchy.
    The reason was viwer due to a mistake in writing viewer.css.
    After correcting the two points, the image changed normally with the shadow of No.1 green and No.2 red first.